• 技術が集うTECH GUILD

    VR×プラレールで遊ぼう

    VR(Virtual Reality:仮想現実)は、仮想的に作り出した空間を体験できる技術です。
    プラレールは、タカラトミー社のプラスチック製の鉄道のおもちゃです。
    この2つを組み合わせて何か面白そうなことを試してみます。
    例えば、プラレールに乗った感覚を作り出してみます。

    本記事の概要

    以下の通り、プラレールに乗った感覚を体験する方法を紹介します。

    1. プラレールの列車にRICOH Thetaを載せて撮影します。
    2. 撮影した動画をWebアプリ化します。
    3. Oculus Goで視聴します。

    必要な機材

    • RICOH Theta
      (m15, S, SC, V等様々なバージョンがありますが、本記事ではm15を使用しました)
    • Oculus Go

    RICOH Thetaで撮影

    ThetaはRICOH社の製品で、360度の全天球動画を撮影できる機器です。
    手軽に360度動画を撮影できるため、VRと相性が良いです。

    この写真のように貨物列車にThetaを載せました。輪ゴムで固定です。
    電気機関車は、電池を逆方向に入れ、後ろ向きに走行させることで、Theta貨物を先頭に走らせます。

    動画のVRアプリ化

    A-Frameを使用し、ブラウザで閲覧できるアプリ化します。

    VRアプリ化した結果

    plarail01.html
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>VRプラレール01</title>
        <meta name="description" content="VRプラレール 地上周回 1min">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.7.1/aframe.min.js"></script>
        <script type="text/javascript">
        AFRAME.registerComponent('play-on-window-click', {
          init: function () {
            this.onClick = this.onClick.bind(this);
          },
          play: function () {
            window.addEventListener('click', this.onClick);
          },
          pause: function () {
            window.removeEventListener('click', this.onClick);
          },
          onClick: function (evt) {
            var video = this.el.components.material.material.map.image;
            if (!video) { return; }
            video.playbackRate =1
            video.play();
          }
        });
        </script>
      </head>
      <body>
        <a-scene>
          <a-assets>
            <video id="video" style="display:none" autoplay loop crossorigin="anonymous" playsinline webkit-playsinline>
              <source type="video/mp4" src="video/VRPlaRail_GroundLoop_1min.mp4" />
            </video>
          </a-assets>
          <a-videosphere src="#video" rotation="0 -90 0" play-on-window-click></a-videosphere>
        </a-scene>
      </body>
    </html>

    Oculus Goで閲覧

    Webアプリなので、Oculus GoのブラウザのアドレスバーにURLを入れるだけで見れます。
    (右下のゴーグルボタンを押して没入モードにします)

    参考)ソースはこちら


    コメントを残す

    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください