あけましておめでとうございます～VR年賀状～

あけましておめでとうございます。
毎年AR年賀状を作っていたのですが、マーカーARだとURL単体で完結できないため見てもらいにくいという欠点があります。そこで今年はWebVR年賀状を作りました。
マーカーレスARにチャレンジするかどうかも悩んだのですが、インタラクティブにしたかったという点が1つ、そして31日に作り始めたのでサクッとできそうな方に傾いたというのが1つです。

作ったもの
制作メモ

作ったもの

早速ですが、作った年賀状はこちら↓です。おみくじが引けます。
happynewyear2o21.netlify.app
f:id:sweetgohan:20201231214432p:plain

お借りした背景画像のリンクはこちら。3Dモデルのクレジットはサイト内に記載してみました。

制作メモ

3Dモデル

3Dモデルは全てGLTF形式のものを使用しています。
牛と鳥居のモデルはPolyからお借りしたのですが、6月にサービス終了してしまうんですね・・・。残念です。
ちなみにおみくじの箱だけ自作(というほどでもないですが)しました。

クリックしたら反応する箱

クリックしたらなにかアクションが起こるというものは以前作ったことがあった↓ので、それを参考にしました。
kabos.hatenablog.jp

おみくじの表示

おみくじはWebVRの画面にオーバーラップして表示されるようにしています。これは、a-sceneの上にdivを置いておき、それの表示/非表示を切り替えることで実現できます。
つまり、HTMLを次のように書きます。

<head>
<!--  色々 >
<style>
    #omikuzi {
      height:100%;
      width:100%;
      background: rgba(255,255,255,0.5);
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999;
      opacity: 0;
      visibility: hidden;
    }
</style>
</head>

<body>
  <div id="omikuzi"><p>おみくじ</p></div>
  <a-scene>
   <!-- おみくじの箱とカメラを置く>
   <a-entity
     id="omikuzibox"
     gltf-model="#box"
     click-omikuzi></a-entity>
    <a-camera id="cameraBody" look-controls="reverseMouseDrag: true; reverseTouchDrag: true;" wasd-controls>
       <a-entity cursor="rayOrigin: mouse"></a-entity>
    </a-camera>
  </a-scene>
</body>

そして、JavaScriptで次のように書くと、箱をクリック時におみくじを表示することができます。

AFRAME.registerComponent('click-omikuzi', {
  init: function () {
    this.el.addEventListener(_click, function (event) {
      rand = Math.floor( Math.random() * 7) ;
      omikuziImage.src = images[rand];
      //display omikuzi
      omikuziWindow.style.opacity = 1;
      omikuziWindow.style.visibility = "visible";
    });
  }
});