[Unity] ツルツルのマテリアルに映り込む景色を設定する

Unityはじめました。saekiです。

手順を忘れないように記録を残しておこうと思います。

最近ツルツルなマテリアルを見ていて、周りの景色も映り込むようにしてツルツルテカテカ感を増したいなと思いました。

公式マニュアルのこの辺も確認しましたが、細かいことを読むのがあまり得意ではないので「うっ…」となったところです。

Cubemap – Unity マニュアル

とりあえず操作しながら考えることにしました。

大まかな手順

画像の設定

  1. キューブマップ用のテクスチャ画像を用意する
  2. テクスチャからキューブマップを作成する

マテリアルの設定

  1. マテリアルを新規作成
  2. マテリアルのShaderをSkybox/Cubemapに変更する
  3. マテリアルのテクスチャ画像にキューブマップを設定

Skyboxの設定

  1. Skyboxのマテリアルを設定
  2. Environment Reflectionsのマテリアルを設定

続きを読む [Unity] ツルツルのマテリアルに映り込む景色を設定する

Vue.jsでWebサイトを作るときに使ったライブラリ

Webサイトでよく見る動きや機能を追加しようとしたときに便利だった、実際に使ったライブラリのリストです。

vue-backtotop

名前の通り、トップに戻るボタンです。
ボタンに表示する文字やアイコンの変更も簡単。

vue-scrollto

ページ内リンクにスムーススクロールをつけるときに使いました。
Webサイトのヘッダーをトップに固定しているとスクロール先がヘッダーの下に潜りこんでしまうので、offsetの設定を忘れずに。
main.js
Vue.use(VueScrollTo, {
  offset: -80 //headerの高さの分
})
 offset以外にもスクロールの速度なども設定できます。

他画面からの移動

idを指定するだけではアンカーリンクが機能しなかったので以下のように対処しました。
URLパラメータからアンカーを取得し、this.$scrollTo()を使ってスクロール。
移動先のページ
  mounted () {
    const hash = this.$route.hash
    if (hash && hash.match(/^#.+$/)) {
      this.$scrollTo(hash)
    }
  }
 しかし、これだけだとページの中にidを指定しているにも関わらず、 [vue-scrollto warn]: Trying to scroll to an element that is not on the page となってしまいました。むむむ。

setTimeout()してみたら動きました。

 mounted() {
    setTimeout(this.scroll, 300);
  },
 methods: {
    scroll() {
      const hash = this.$route.hash;
      if (hash && hash.match(/^#.+$/)) {
        this.$scrollTo(hash);
      }
   }
  }

vue-carousel

カルーセルが簡単に実装できます。
マウスドラッグやスマホのスワイプでも動く。便利。
カスタマイズの設定はGitHubで確認。

vue-material-design-icons

マテリアルデザインアイコン。
使いたいところにコンポーネントを入れるだけなのでお手軽。
アイコンの名前を調べる時はこちらのページが便利。

vue-meta

title、descriptionやogなど、headに記述するメタ情報の設定に使いました。

vue-social-sharing

FacebookやTwitterなど、SNSのシェアボタンを各ページに付けるときに。

google-maps-api-loader

GoogleMapを入れるときに使いました。
ページにマップを追加するコンポーネントを作る時はこのあたりを参考にしました。

date-fns

日付の書式を整えるときに使いました。