トップページ -> データベース研究スタート -> A-Frame の利用 -> A-Frame でクリックイベント
[サイトマップへ]  

A-Frame でクリックイベント

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

公開されているソフトを使い,「A-Frameで表示されたオブジェクト」に「クリック」ができるようにする.

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

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

先人に感謝.

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

キーワード: A-Frame, Mouse カーソル, クリック


前もって準備しておくこと

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

ステップ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/0.5.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 ブラウザで表示.

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

参考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/0.5.0/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 ブラウザで表示.

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


ステップ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/0.5.0/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 ブラウザで表示.

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


ステップ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/0.5.0/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 ブラウザで表示.

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


ステップ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/0.5.0/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 ブラウザで表示.

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

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

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


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

エディタで次の 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/0.5.0/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 ブラウザで表示.

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

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


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/0.5.0/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 をインストールしてください)

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


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/0.5.0/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 をインストールしてください)

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


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