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

#始めに
最近ふれあいまつりを参加しました。私たち奥多摩日本語学校はVR体験のプロジェクトを作りました。僕はそのプロジェクト開発の担当です。前僕はVRの経験あまりないから、最初色々VRのことを探して、色々な方法を見つけた。そのあと一つ面白いなフレームワーク選びました、[A-Frame](https://aframe.io/)というフレームワークです。そうして、VR体験のプロジェクトのためにA-Frameのフレームワークを使います。まあ、少しJavascriptも使います。以下は、VR体験のサンプルビューです。
![BIT VR.png](https://qiita-image-store.s3.amazonaws.com/0/289131/e2d6a68f-6bf4-40cd-701d-131693b24f6a.png)

##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の関数は一定時間画像サムネイルを非表示にし、著作権も表示します。私がそれを隠す理由は、場面ごとに説明があるからです。

##ソース
###ドキュメンテーション
- https://aframe.io/
- https://aframe.io/docs/0.8.0/introduction/
- https://glitch.com/~aframe-gallery

###依存関係
- [aframe](https://www.npmjs.com/package/aframe)
- [budo](https://www.npmjs.com/package/budo)
- [aframe-animation-component](https://www.npmjs.com/package/aframe-animation-component)
- [aframe-event-set-component](https://www.npmjs.com/package/aframe-event-set-component)
- [aframe-layout-component](https://www.npmjs.com/package/aframe-layout-component)
- [aframe-template-component](https://www.npmjs.com/package/aframe-template-component)

###著作権
- https://www.google.co.jp/maps/ ©2018 Google
- https://www.instantstreetview.com/@-7.607656,110.203337,254.48h,-6.35p,0z ©2018 Google
- https://www.instantstreetview.com/@35.811264,139.159132,184.36h,-1.96p,1z ©Sho Tanaka
- https://www.instantstreetview.com/@11.314114,119.422055,341.57h,2.83p,1z ©Martin Crawford
- https://www.instantstreetview.com/@35.794672,139.049798,153.92h,-14.67p,0z ©Hiroshi Okagawa
- https://www.instantstreetview.com/@35.776766,139.020951,339.32h,-28.01p,0.03z ©Masato OTA

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