トップページ -> データベース関連技術 -> A-Frame の利用 -> A-Frame で3次元オブジェクト表示,アニメーション,パノラマ表示,クリッカブルに設定
[サイトマップへ], [サイト内検索へ]

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

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

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

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


前準備

Web ブラウザ

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

A-Frame のバージョン確認

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

[image]

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

[image]

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

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

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

Web ブラウザで表示.

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

[image]

参考Webページ: https://github.com/aframevr/aframe/


ステップ2: A-Frame の拡張機能(1)パーティクルアニメーション

エディタで次の 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/aframe-animation-component@3.2.1/dist/aframe-animation-component.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-scene>

  </body>
</html>

Web ブラウザで表示.

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

[image]

ステップ3: A-Frame の拡張機能(2)オブジェクトの動き

エディタで次の 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/aframe-animation-component@3.2.1/dist/aframe-animation-component.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="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 ブラウザで表示.

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

[image]

ステップ4: A-Frame の拡張機能(3)波の動き

エディタで次の 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/aframe-animation-component@3.2.1/dist/aframe-animation-component.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="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 ブラウザで表示.

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

[image]

ステップ5: A-Frame の拡張機能(4)空のグラデーション

エディタで次の 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/aframe-animation-component@3.2.1/dist/aframe-animation-component.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="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 ブラウザで表示.

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

[image]

今度は、 いままでのものを組み合わせる. エディタで次の 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/aframe-animation-component@3.2.1/dist/aframe-animation-component.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 ブラウザで表示.

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

[image]

ステップ6: A-Frame の拡張機能(5)クリックすると反応する

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

A-Frame と「Mouse Cursor Component for A-Frame VR」を使用.

参考Webページ: https://github.com/mayognaise/aframe-mouse-cursor-component

エディタで次の 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/aframe-animation-component@3.2.1/dist/aframe-animation-component.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>
    <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>

Web ブラウザで表示.

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

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

[image]

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/aframe-animation-component@3.2.1/dist/aframe-animation-component.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>
    <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>

Web ブラウザで表示.

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

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

[image]

Blender の3次元オブジェクト

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/aframe-animation-component@3.2.1/dist/aframe-animation-component.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>
    <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>

Web ブラウザで表示.

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

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

[image]

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


本サイトは金子邦彦研究室のWebページです.サイトマップは,サイトマップのページをご覧下さい. 本サイト内の検索は,サイト内検索のページをご利用下さい.

問い合わせ先: 金子邦彦(かねこ くにひこ) [image]