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>