【A-Frame】aframe-physice-systemを使って、物理演算を追加してみた


A-Frameは、Webベースの仮想現実(VR)および拡張現実(AR)体験を簡単に構築するためのオープンソースのフレームワークです。


A-Frameにaframe-physice-ststemモジュールをインポートして、物理演算を追加してみます。

A-Frameを読み込んだHTMLファイルを用意


htmlファイルを準備して、まずはA-Frameをインポートします。

aframe-pysics-systemを動かすために、aframeのバージョンを落としています。



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>

</head>
<body>
    <a-scene>

    </a-scene>
</body>
</html>

サーバーを起動します


http-server

aframe-physics-systemをインポート

aframe-physics-systemをインポートするための記述をheadタグの中に書きます。



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
  <!-- これ ↓↓↓ -->
    <script src="//cdn.jsdelivr.net/gh/n5ro/aframe-physics-system@v1.4.0/dist/aframe-physics-system.js"></script>
</head>
<body>
    <a-scene>

    </a-scene>
</body>
</html>

physics属性を書き足す

a-sceneタグにpysics属性を書き足します。

今回は、開発がしやすいようにdebugモードをtrueにします。



<a-scene physics="debug: true;">
</a-scene>

四角いボックスを表示させる

とりあえず四角いボックスに、「静的なオブジェクト」static-bodyを追加します。

確認がしやすいように色を黄色に変更して、postionのz軸を動かしてカメラ奥にボックスをおきます。



<a-scene physics="debug: true;">
 <a-box
   static-body
  color="yellow"
   position="0 0 -3"
  >
  </a-box>
</a-scene>


四角いボックスに赤い枠線が付いた状態で、表示されているのが確認できます。

debugモードだとこのように表示され、赤い枠線が付いていると言うことはaframe-physics-systemが効いていると言うことになります。

静的なオブジェクトとは?

static-bodyを持つ静的なオブジェクトは物理エンジンによって動かされません。つまり、重力や衝突によっても位置や回転が変わりません。その場所にい続けます。

球の動的オブジェクトを追加する

次に黄色いボックスの頭上に、球の「動的オブジェクト」を追加します。

こちらは赤色に設定します。



<a-scene physics="debug: true;">
 <a-box
   static-body
  color="yellow"
   position="0 0 -3"
  >
  </a-box>
  
  <!-- 球のオブジェクト -->        
  <a-sphere            
   dynamic-body            
   position="0 5 -5"       
   color="red">        
  </a-sphere>
</a-scene>

赤い球が跳ね返るのが確認できます。

動的なオブジェクト

物理エンジンが重力や力、衝突などの物理的な影響を受けて動くオブジェクト。フォルトで重力の影響を受けます。たとえば、空中に配置されたオブジェクトは落下します。

全体のコード

全体のコードはこちらです。

aframeとaframe-pysics-systemの互換性の違いがあるので、確認して使用してください。



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
    <script src="//cdn.jsdelivr.net/gh/n5ro/aframe-physics-system@v1.4.0/dist/aframe-physics-system.js"></script>
</head>
<body>
    <a-scene physics="debug: true;">
    <!-- 四角いボックスのオブジェクト -->
        <a-box
            static-body
            position="0 0 -5"
            color="yellow"
        ></a-box>

        <!-- 球のオブジェクト -->
        <a-sphere
            dynamic-body
            position="0 5 -5"
            color="red"
        >
        </a-sphere>
    </a-scene>
</body>
</html>


コメント

タイトルとURLをコピーしました