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

A-Frameは，Google Chrome や Firefox で簡単に３次元コンピュータグラフィックスや、バーチャルリアリティができるようにする機能をもったソフト。Vive, Rift, Daydream, GearVR に対応．

メモ: FBX 形式については、参考Webページ: https://github.com/donmccurdy/aframe-extras/tree/master/src/loaders

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

前準備

Web ブラウザ

A-Frame のバージョン確認

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

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

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

エディタで次の 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.0.4/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>

※ 右下の「めがね」ボタンをクリックするとモードが切り替わる

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

エディタで次の 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.0.4/aframe.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/aframe-animation-component.min.js"></script>
    <script src="https://unpkg.com/[email protected]/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/[email protected]/dist/gradientsky.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>

※ 右下の「めがね」ボタンをクリックするとモードが切り替わる

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

エディタで次の 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.0.4/aframe.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/aframe-animation-component.min.js"></script>
    <script src="https://unpkg.com/[email protected]/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/[email protected]/dist/gradientsky.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>

※ 右下の「めがね」ボタンをクリックするとモードが切り替わる

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

エディタで次の 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.0.4/aframe.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/aframe-animation-component.min.js"></script>
    <script src="https://unpkg.com/[email protected]/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/[email protected]/dist/gradientsky.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>

※ 右下の「めがね」ボタンをクリックするとモードが切り替わる

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

エディタで次の 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.0.4/aframe.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/aframe-animation-component.min.js"></script>
    <script src="https://unpkg.com/[email protected]/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/[email protected]/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>

※ 右下の「めがね」ボタンをクリックするとモードが切り替わる

今度は、 いままでのものを組み合わせる．エディタで次の 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.0.4/aframe.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/aframe-animation-component.min.js"></script>
    <script src="https://unpkg.com/[email protected]/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/[email protected]/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>

※ 右下の「めがね」ボタンをクリックするとモードが切り替わる

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

「A-Frameで表示されたオブジェクト」に「クリック」ができるようにする．

エディタで次の 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.0.4/aframe.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/aframe-animation-component.min.js"></script>
    <script src="https://unpkg.com/[email protected]/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/[email protected]/dist/gradientsky.min.js"></script>
    <script src="https://rawgit.com/mayognaise/aframe-mouse-cursor-component/master/dist/aframe-mouse-cursor-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">
        <a-animation attribute="rotation" begin="click" dur="500" fill="backwards" to="30 30 360"></a-animation>
      </a-box>
      <a-sky color="pink"></a-sky>
      <a-entity position="0 1.8 4">
        <a-entity camera look-controls mouse-cursor>
          <a-cursor fuse="true" color="yellow"></a-cursor>
        </a-entity>
      </a-entity>
      </a-entity>
    </a-scene>
  </body>
</html>

※ 右下の「めがね」ボタンをクリックするとモードが切り替わる

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.0.4/aframe.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/aframe-animation-component.min.js"></script>
    <script src="https://unpkg.com/[email protected]/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/[email protected]/dist/gradientsky.min.js"></script>
    <script src="https://rawgit.com/mayognaise/aframe-mouse-cursor-component/master/dist/aframe-mouse-cursor-component.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>

Google Chrome ではうまく表示できないみたいです．Firefox ならOK (Firefox をインストールしてください)

※ 右下の「めがね」ボタンをクリックするとモードが切り替わる

Blender の3次元オブジェクト

説明のため Wevefront OBJ形式ファイル, Wavefromt MTL形式ファイルを使う．この資料で使用している Wevefront OBJ形式ファイル, Wavefromt 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.0.4/aframe.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/aframe-animation-component.min.js"></script>
    <script src="https://unpkg.com/[email protected]/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/[email protected]/dist/gradientsky.min.js"></script>
    <script src="https://rawgit.com/mayognaise/aframe-mouse-cursor-component/master/dist/aframe-mouse-cursor-component.min.js"></script>
  </head>
  <body>
    <a-scene>
        <a-assets>
            <a-asset-item id="a-obj" src="sample.obj"></a-asset-item>
        </a-assets>
        <a-entity id="univ" obj-model="obj:#a-obj;" position="0 0 0" scale="1 1 1" rotation="0 0 0"></a-entity>    
    </a-scene>
  </body>
</html>

Google Chrome ではうまく表示できないみたいです．Firefox ならOK (Firefox をインストールしてください)

※ 右下の「めがね」ボタンをクリックするとモードが切り替わる