Zenn
🥽

Aframeに物理演算フレームワークを導入する（aframe-physics-system）

2022/05/05に公開
VR
Three.js
#
WebVR
#
aframe
#
3d
tech

Aframeに aframe-physics-system を導入してオブジェクトに物理演算で動きを追加します。

  1. Aframe と aframe-physics-system を読み込み
      <head>
    <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>
    注意:
    • Aframe1.3.0(現時点で最新)以上のバージョンではaframe-physics-systemでThree.Geometryがundefinedとなり機能しない（aframe-physics-systemの想定するThree.jsのバージョンが古い）
    • Aframe 1.2.0 とThree.Geometryのpolyfillを利用すればこのエラーは回避できる 
      •   <script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@r134/examples/js/deprecated/Geometry.js"></script>
    • が、今度はdynamic-bodyがstatic-bodyをすり抜けてしまう
    • よって今回はjsFiddleで動作が確認されている Aframe 0.8.0 をひとまず使用している
  2. 下記を開けば球体が転がる動きが確認できます
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <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: false;">
      <a-camera id="camera" active="true" look-controls wasd-controls position="0 1.6 0" data-aframe-default-camera></a-camera>
      <a-sphere
	  position="-1 0.3 -2"
	  rotation="0 5 0"
	  color="#4CC3D9"
	  radius="0.3"
	  depth="0.5"
	  dynamic-body="linearDamping:0.9;mass:10;"
      ></a-sphere>
      <a-sphere
	  position="0 0.3 -2"
	  rotation="0 5 0"
	  color="#4CC3D9"
	  radius="0.3"
	  depth="0.5"
	  dynamic-body="linearDamping:0.9;mass:10;"
      ></a-sphere>
      <a-sphere
	  position="1 0.3 -2"
	  rotation="0 5 0"
	  color="#4CC3D9"
	  radius="0.3"
	  depth="0.5"
	  dynamic-body="linearDamping:0.9;mass:10;"
      ></a-sphere>
      <a-sphere
	  position="0 1 -3"
	  radius="0.5"
	  color="#f00"
	  dynamic-body="linearDamping:0.9;mass:10;"
      ></a-sphere>
      <a-sphere
	  position="-1.2 1 -3"
	  radius="0.5"
	  color="#f00"
	  dynamic-body="linearDamping:0.9;mass:10;"
      ></a-sphere>
      <a-sphere
	  position="1.2 1 -3"
	  radius="0.5"
	  color="#f00"
	  dynamic-body="linearDamping:0.9;mass:10;"
      ></a-sphere>
      <a-sphere
	  position="1 1 -3"
	  radius="0.25"
	  color="#f80"
	  dynamic-body="linearDamping:0.9;mass:10;"
      ></a-sphere>
      <a-sphere
	  position="1 1 -3"
	  radius="0.25"
	  color="#f80"
	  dynamic-body="linearDamping:0.9;mass:10;"
      ></a-sphere>
      <a-sphere
	  position="1 1 -3"
	  radius="0.25"
	  color="#f80"
	  dynamic-body="linearDamping:0.9;mass:10;"
      ></a-sphere>
      <a-plane
	  position="0 -1 -4"
	  rotation="-110 10 0"
	  width="10"
	  height="10"
	  color="#7BC8A4"
	  static-body
      ></a-plane>
      <a-plane
	  position="0 -1 -4"
	  rotation="-110 -10 0"
	  width="10"
	  height="10"
	  color="#7BC8A4"
	  static-body
      ></a-plane>
      <a-plane
	  position="0 4 -4"
	  rotation="-110 0 0"
	  width="10"
	  height="10"
	  color="#7BC8A4"
	  static-body
      ></a-plane>
      <a-plane
	  position="0 3 -3.6"
	  rotation="0 0 0"
	  width="10"
	  height="10"
	  color="#7BC8A4"
	  static-body
      ></a-plane>
      <a-plane
	  position="2.5 3 -5"
	  rotation="0 90 0"
	  width="10"
	  height="10"
	  color="#7BC8A4"
	  static-body
      ></a-plane>
      <a-plane
	  position="-3 3 -5"
	  rotation="0 90 0"
	  width="10"
	  height="10"
	  color="#7BC8A4"
	  static-body
      ></a-plane>
      <a-plane
	  position="0 5 0"
	  rotation="0 0 0"
	  width="10"
	  height="10"
	  color="#7BC8A4"
	  static-body
      ></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

所感: Aframe最新版が使えないので修正PR作るか aframe-physics-system 以外の選択肢を検討した方がよさそう…（今度やる）

Discussion