Zenn
⚽

【A-Frame】WebVRでの物理演算

2022/02/28に公開
#
WebVR
#
aframe
#
ammojs
tech

株式会社palanのxR事業部で主にWebAR/VRの開発をしています、damiと申します。
この記事ではA-Frameで物理演算を適用させたい時の基本的な方法をまとめていきます。

TL;DR

  • A-Frameで物理演算を行う場合は、外部ライブラリ 「aframe-physics-system」を使用する必要がある
    • 「aframe-physics-system」は物理演算エンジンとしてCannon.jsというライブラリを使っているがこれがA-Frame v1.3.0（投稿時点での最新）では動かない
      • A-Frame v0.8.2とかの古いバージョンだとCannon.jsで動く
    • aframe v1.3.0では代替として Ammo.jsという物理演算エンジンを併用する必要がある

コード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
    <!-- ammo -->
    <script src="https://mixedreality.mozilla.org/ammo.js/builds/ammo.wasm.js"></script>
    <!-- aframe-physics-system -->
    <script src="//cdn.jsdelivr.net/gh/n5ro/aframe-physics-system@v4.0.1/dist/aframe-physics-system.min.js"></script>
  </head>
  <body>
    <!-- ※1 a-sceneタグにphysicsのプロパティを入れる -->
    <a-scene
      vr-mode-ui="enabled:false"
      physics="driver: ammo; debug: true; debugDrawMode: 1;"
    >
      <!-- ※2 物理演算を適用させたいオブジェクトに ammo-body,ammo-shape などのプロパティを追加する -->
      <!-- static -->
      <a-box
        position="0 0.5 0"
        ammo-body="type: static"
        ammo-shape="type: box"
      ></a-box>
      <!-- dynamic -->
      <a-box
        ammo-body="type: dynamic"
        ammo-shape="type: box"
        position="0.5 5 0.5"
      ></a-box>

      <!-- 床 -->
      <a-plane
        ammo-body="type: static"
        ammo-shape="type: box"
        position="0 0 0"
        rotation="-90 0 0"
	scale="7 5 1"
        color="#fff"
      ></a-plane>

      <a-sky color="#000990"></a-sky>
      <a-light
        type="directional"
        intensity="1.0"
        position="10 100 30"
      ></a-light>
      <a-light type="ambient" intensity="0.2" color="#404040"></a-light>
      <a-entity
        camera
        look-controls
        wasd-controls
        position="0 2 5"
      >
      </a-entity>
    </a-scene>
  </body>
</html>

以下では※1, 2あたりのphysics特有のプロパティについて確認していきます。

プロパティ

a-sceneにつける physicsプロパティ

  • driver
    • 物理演算ドライバーの指定
    • ammo を指定する
  • debug
    • デバッグモードをするか（true/false）
    • trueにすると物理演算を適用したオブジェクトのコライダー（当たり判定になる外枠）が表示される
    • 検証時はtrueにして確認した方がいい
  • debugDrawMode
    • debug: true のとき、表示する情報をいくつかのモードから選択することができるオプション
    • デフォルトはdebugDrawMode: 1;

例

<a-scene physics="driver: ammo; debug: true; debugDrawMode: 1;">

オブジェクトにつける ammo-bodyプロパティ

大体これを設定すればOKそう

  • type
    • type: staticまたはtype: dynamicを指定
      • static: 衝突に対して影響を受けない、静的なオブジェクト
        • 影響を受けたくない床などに適用する
      • dynamic: 衝突に対して跳ね返るなどの反応を受け取る、動的なオブジェクト

プロパティを全て確認したい場合はこちら
https://github.com/n5ro/aframe-physics-system/blob/master/AmmoDriver.md#ammo-body

オブジェクトにつける ammo-shapeのプロパティ

大体これを設定すればOKそう

  • type
    • コライダーの形を指定できる
      • 指定できる形状は box, cylinder, sphere, capsule, coneなどなど…
      • 形状一覧はこちら
      • 例: ammo-shape="type: box"
    • コライダーの形の微調整にはsphereRadiusなどのaframe primitive geometryのプロパティが使える模様
      • 例：ammo-shape="type: sphere; fit: manual; sphereRadius: 0.11

プロパティを全て確認したい場合はこちら
https://github.com/n5ro/aframe-physics-system/blob/master/AmmoDriver.md#ammo-shape

例

<!-- static -->
<a-box
  position="0 0.5 0"
  ammo-body="type: static"
  ammo-shape="type: box"
></a-box>
<!-- dynamic -->
<a-box
  ammo-body="type: dynamic"
  ammo-shape="type: box"
  position="0.5 5 0.5"
></a-box>

参考

Discussion

ログインするとコメントできます