A-Frameを使って、ウェブVR体験作ることができます！

Last updated at 2018-11-11Posted at 2018-11-11

#始めに
最近ふれあいまつりを参加しました。私たち奥多摩日本語学校はVR体験のプロジェクトを作りました。僕はそのプロジェクト開発の担当です。前僕はVRの経験あまりないから、最初色々VRのことを探して、色々な方法を見つけた。そのあと一つ面白いなフレームワーク選びました、A-Frameというフレームワークです。そうして、VR体験のプロジェクトのためにA-Frameのフレームワークを使います。まあ、少しJavascriptも使います。以下は、VR体験のサンプルビューです。

##A-Frame
簡単の説明はA-FrameはVR体験を構築するためのウェブフレームワークです。HTMLタッグとEntity-Componentを使って、ウェブVR作ることができます。

##開発環境
###開発
開発について、OSはWindows 10 Home. Sublimeテキストエディターを使います。
###ブラウザ
IOSのSafariとGoogle Chrome、アンドロイドのChromeで動作します。Windows（Chrome、Firefox）。
###デバイス
VRヘッドセットを使います。これはアンドロイドとIOSの両方で動作します。でも大きいな電話はちょっと問題があります。

##コード
以下は、画面の上部に著作権名を表示するためのコードです。

<div style="background-color: white; position: absolute; z-index: 2;">© <span id="cp-name">Sho Tanaka</span></div>

<a-assets>
  <!-- 360 image -->
  <img id="bit" crossorigin="anonymous" src="images/1.jpg">
  <img id="borobudur" crossorigin="anonymous" src="images/5.jpg">
  <img id="nacpan_beach" crossorigin="anonymous" src="images/2.jpg">
  <img id="okutama_lake" crossorigin="anonymous" src="images/3.jpg">
  <img id="ogouchi_jinja" crossorigin="anonymous" src="images/4.jpg">

  <!-- thumb image -->
  <img id="bit-thumb" crossorigin="anonymous" src="images/vr_bit.jpg">
  <img id="borobudur-thumb" crossorigin="anonymous" src="images/vr_indonesia.jpg">
  <img id="nacpan_beach-thumb" crossorigin="anonymous" src="images/vr_phili.jpg">
  <img id="okutama_lake-thumb" crossorigin="anonymous" src="images/vr_okutama.jpg">
  <img id="ogouchi_jinja-thumb" crossorigin="anonymous" src="images/vr_okutama.jpg">

  <!-- Image link template to be reused. -->
  <script id="link" type="text/html">
    <a-entity class="link"
      geometry="primitive: plane; height: 1; width: 1.3"
      material="shader: flat; src: ${thumb}"
      event-set__1="_event: mousedown; scale: 1 1 1"
      event-set__2="_event: mouseup; scale: 1.2 1.2 1"
      event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
      event-set__4="_event: mouseleave; scale: 1 1 1"
      set-image="on: click; target: #image-360; src: ${src}">
    </a-entity>
  </script>
</a-assets>

以上は360 imageとサムネイルの設定です。360画像を変更するためのjavascriptもあります。

<a-sky id="image-360" radius="10" src="#bit" ></a-sky>

このコードは、360°画像をシーンに設定するためのコードです。背景色の設定もできます。

<a-entity id="links" layout="type: line; margin: 1.5" position="-1.7 1 -4">
  <a-entity id="bit_frame" class="clickable" onclick="hideframe(50,'bit_frame', 'Sho Tanaka')" template="src: #link" data-src="#bit" data-thumb="#bit-thumb" position="0 0 0" sound="on: click; src: /sound/BIT.mp3" preload="auto"></a-entity>
  <a-entity id="borubudur_frame" class="clickable" onclick="hideframe(95,'borubudur_frame', '2018 Google')" template="src: #link" data-src="#borobudur" data-thumb="#borobudur-thumb" position="2 0 0" sound="on: click; src: /sound/Borobudur.mp3" preload="auto"></a-entity>
</a-entity>

このコードは、サムネイルのオブジェクトを表示と、サムネイルのポジション、カーソルイベントがトリガーされているときにサウンドとイベントを設定します。

<a-entity camera look-controls>
  <a-cursor id="cursor" 
    animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150"
    animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 150"
    event-set__1="_event: mouseenter; color: springgreen"
    event-set__2="_event: mouseleave; color: white"
    fuse="true"
    raycaster="objects: .clickable">
  </a-cursor>
</a-entity>

このコードは、カメラとカーソルの設定用です。カメラの真ん中は○のカーソルがあります。カーソルにサムネイルの中にフォーカスして、他の画面を表示する。

###使ったのJavascript

<script type="text/javascript">
  function hideframe(delay, framevalue, copyright){
    document.getElementById('cp-name').innerText = copyright;
  var frame = ["bit_frame","borubudur_frame","nacpan_beach_frame","okutama_lake_frame","oogouchi_jinja_frame"];
    for(i=0; i< frame.length; i++){
      if(frame[i] != framevalue){
        var frameK = document.getElementById(frame[i]);
        frameK.setAttribute('visible', false);
        frameK.setAttribute('class', "");
        setTimeout(getFrame(frameK), delay * 1000);
      }
    }
  }

  function getFrame(element){
    return function() {
      element.setAttribute('class', "clickable");
      element.setAttribute('visible', true);
    }
  }
</script>

以上のJavascriptの関数は一定時間画像サムネイルを非表示にし、著作権も表示します。私がそれを隠す理由は、場面ごとに説明があるからです。

##ソース
###ドキュメンテーション

###依存関係

###著作権

###Githubのリンク
https://github.com/viinkelvin/BIT-Travelling-VR

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up