A-Frame で３次元オブジェクト表示，アニメーション，パノラマ表示，クリッカブルに設定

【概要】

A-Frameは，Google Chrome や Firefox で，３次元コンピュータグラフィックスやバーチャルリアリティ（VR）を扱うためのWebフレームワークである。ここでは，基本的なオブジェクト表示から始め，パーティクル（粒子）アニメーション，オブジェクトの動き，波や空のグラデーションといった拡張機能，クリックへの反応，360度パノラマ画像の表示，Blenderで作成した３次元オブジェクトの表示までを順に説明する。

【目次】

前準備
ステップ1：A-Frame を動かしてみる
ステップ2：A-Frame の拡張機能（１）パーティクルアニメーション
ステップ3：A-Frame の拡張機能（２）オブジェクトの動き
ステップ4：A-Frame の拡張機能（３）波の動き
ステップ5：A-Frame の拡張機能（４）空のグラデーション
ステップ6：A-Frame の拡張機能（５）クリックすると反応する
360度パノラマ画像
Blender の3次元オブジェクト

【関連する外部ページ】

https://github.com/aframevr/aframe/
FBX 形式の読み込みについて：https://github.com/donmccurdy/aframe-extras/tree/master/src/loaders

謝辞：ここで紹介しているソフトウェアの作者に感謝する。

前準備

Web ブラウザ

前準備として，Firefox か Google Chrome を準備しておく。

A-Frame のバージョン確認

A-Frame のWebページ https://aframe.io/ を開き，「GET STARTED」をクリックする。

表示されるページで，A-Frame の URL とバージョン番号を確認する。

ステップ1：A-Frame を動かしてみる

https://aframe.io/releasesで公開されているプログラムを使う。

エディタで次の HTML ファイルを作成する。ファイル名を a.html のような分かりやすい名前で保存する。

a-box: 立方体
a-sphere: 球
a-cylinder: 円柱
a-plane: 面
a-sky: 空（背景）

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
    <title>A-Frame</title>
    <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
  </head>
  <body>

    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>

  </body>
</html>

Web ブラウザで表示する。

* 右下の「めがね」ボタン（VRモードの切り替えボタン）をクリックするとモードが切り替わる。

ステップ2：A-Frame の拡張機能（１）パーティクルアニメーション

エディタで次の HTML ファイルを作成する。ファイル名を a.html のようにして保存する。

a-entity id="rain": 拡張機能では，a-entity id="..." という書き方が基本である。

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
    <title>A-Frame</title>
    <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-particle-system-component@1.0.x/dist/aframe-particle-system-component.min.js"></script>
  </head>
  <body>

    <a-scene>
      <a-entity id="rain" particle-system="preset: rain; color: #24CAFF; particleCount: 5000"></a-entity>
    </a-scene>

  </body>
</html>

Web ブラウザで表示する。

* 右下の「めがね」ボタン（VRモードの切り替えボタン）をクリックするとモードが切り替わる。

ステップ3：A-Frame の拡張機能（２）オブジェクトの動き

エディタで次の HTML ファイルを作成する。ファイル名を a.html のようにして保存する。

animation: 動かしたいオブジェクトに animation 属性を付ける。

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
    <title>A-Frame</title>
    <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
  </head>
  <body>

    <a-scene>
      <a-entity id="sphere" geometry="primitive: sphere"
                material="color: #EFEFEF; shader: flat"
                position="0 0.15 -5"
                light="type: point; intensity: 5"
                animation="property: position; easing: easeInOutQuad; dir: alternate; dur: 1000; to: 0 -0.10 -5; loop: true"></a-entity>
    </a-scene>

  </body>
</html>

Web ブラウザで表示する。

* 右下の「めがね」ボタン（VRモードの切り替えボタン）をクリックするとモードが切り替わる。

ステップ4：A-Frame の拡張機能（３）波の動き

エディタで次の HTML ファイルを作成する。ファイル名を a.html のようにして保存する。

a-entity id="ocean": 拡張機能では，a-entity id="..." という書き方が基本である。

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
    <title>A-Frame</title>
    <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-extras.ocean@%5E3.5.x/dist/aframe-extras.ocean.min.js"></script>
  </head>
  <body>

    <a-scene>
      <a-entity id="ocean" ocean="density: 20; width: 50; depth: 50; speed: 4"
                material="color: #9CE3F9; opacity: 0.75; metalness: 0; roughness: 1"
                rotation="-90 0 0"></a-entity>
    </a-scene>

  </body>
</html>

Web ブラウザで表示する。

* 右下の「めがね」ボタン（VRモードの切り替えボタン）をクリックするとモードが切り替わる。

ステップ5：A-Frame の拡張機能（４）空のグラデーション

エディタで次の HTML ファイルを作成する。ファイル名を a.html のようにして保存する。

a-entity id="sky": 拡張機能では，a-entity id="..." という書き方が基本である。

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
    <title>A-Frame</title>
    <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-gradient-sky@1.0.4/dist/gradientsky.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-entity id="sky" geometry="primitive: sphere; radius: 5000"
                material="shader: gradient; topColor: 235 235 245; bottomColor: 185 185 210"
                scale="-1 1 1"></a-entity>
    </a-scene>

  </body>
</html>

Web ブラウザで表示する。

* 右下の「めがね」ボタン（VRモードの切り替えボタン）をクリックするとモードが切り替わる。

今度は，いままでのものを組み合わせる。エディタで次の HTML ファイルを作成する。ファイル名を a.html のようにして保存する。

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
    <title>A-Frame</title>
    <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-particle-system-component@1.0.x/dist/aframe-particle-system-component.min.js"></script>
    <script src="https://unpkg.com/aframe-extras.ocean@%5E3.5.x/dist/aframe-extras.ocean.min.js"></script>
    <script src="https://unpkg.com/aframe-gradient-sky@1.0.4/dist/gradientsky.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-entity id="rain" particle-system="preset: rain; color: #24CAFF; particleCount: 5000"></a-entity>

      <a-entity id="sphere" geometry="primitive: sphere"
                material="color: #EFEFEF; shader: flat"
                position="0 0.15 -5"
                light="type: point; intensity: 5"
                animation="property: position; easing: easeInOutQuad; dir: alternate; dur: 1000; to: 0 -0.10 -5; loop: true"></a-entity>

      <a-entity id="ocean" ocean="density: 20; width: 50; depth: 50; speed: 4"
                material="color: #9CE3F9; opacity: 0.75; metalness: 0; roughness: 1"
                rotation="-90 0 0"></a-entity>

      <a-entity id="sky" geometry="primitive: sphere; radius: 5000"
                material="shader: gradient; topColor: 235 235 245; bottomColor: 185 185 210"
                scale="-1 1 1"></a-entity>

      <a-entity id="light" light="type: ambient; color: #888"></a-entity>

    </a-scene>

  </body>
</html>

Web ブラウザで表示する。

* 右下の「めがね」ボタン（VRモードの切り替えボタン）をクリックするとモードが切り替わる。

ステップ6：A-Frame の拡張機能（５）クリックすると反応する

A-Frameで表示されたオブジェクトを，クリックできるようにする。 A-Frame に組み込まれているカーソル機能（マウスでクリックできる cursor コンポーネント）と，event-set コンポーネントを使う。

【関連する外部ページ】 https://github.com/supermedium/superframe/tree/master/components/event-set/

エディタで次の HTML ファイルを作成する。ファイル名を a.html のようにして保存する。

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
    <title>A-Frame</title>
    <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-event-set-component@5.0.0/dist/aframe-event-set-component.min.js"></script>
  </head>
  <body>

    <a-scene>
      <a-box position="0 3.5 -2" rotation="30 30 0" color="skyblue"
             event-set__enter="_event: mouseenter; material.color: yellowgreen; scale: 3 1 1"
             event-set__leave="_event: mouseleave; material.color: skyblue; scale: 1 1 1"
             animation__click="property: rotation; startEvents: click; dur: 500; from: 30 30 0; to: 30 30 360">
      </a-box>

      <a-sky color="pink"></a-sky>

      <a-entity position="0 1.8 4">
        <a-camera cursor="rayOrigin: mouse"></a-camera>
      </a-entity>
    </a-scene>

  </body>
</html>

Web ブラウザで表示する。

青い箱をクリックすると反応することを確認する。

* 右下の「めがね」ボタン（VRモードの切り替えボタン）をクリックするとモードが切り替わる。

360度パノラマ画像

RICOH THETA のようなパノラマカメラで撮影した画像（Equirectangular 投影形式）は，A-Frame で簡単に表示できる。

エディタで次の HTML ファイルを作成する。ファイル名を a.html のようにして保存する。

画像ファイルは R0010025.JPG をダウンロードして，HTMLファイルと同じディレクトリに置く。

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
    <title>A-Frame</title>
    <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
  </head>
  <body>

    <a-scene>
        <a-sky src="R0010025.JPG"></a-sky>
        <a-camera wasd-controls-enabled="true"></a-camera>
    </a-scene>

  </body>
</html>

Web ブラウザで表示する。

* 右下の「めがね」ボタン（VRモードの切り替えボタン）をクリックするとモードが切り替わる。

Blender の3次元オブジェクト

A-Frame は，Blender で作成した３次元オブジェクトのビューワにもなる。

＜前準備＞

説明のため，Wavefront OBJ形式ファイルと Wavefront MTL形式ファイルを使う。この資料で使用しているファイルは，次からダウンロードできる。

エディタで次の HTML ファイルを作成する。ファイル名を a.html のようにして保存する。

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
    <title>A-Frame</title>
    <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
  </head>
  <body>

    <a-scene>

        <a-assets>
            <a-asset-item id="a-obj" src="sample.obj"></a-asset-item>
            <a-asset-item id="a-mtl" src="sample.mtl"></a-asset-item>
        </a-assets>

        <a-entity id="univ" obj-model="obj: #a-obj; mtl: #a-mtl" position="0 0 0" scale="1 1 1" rotation="0 0 0"></a-entity>

    </a-scene>

  </body>
</html>

Web ブラウザで表示する。

* 右下の「めがね」ボタン（VRモードの切り替えボタン）をクリックするとモードが切り替わる。