Aframeに物理演算フレームワークを導入する（aframe-physics-system）
32118 ワード
Aframeに aframe-physics-system を導入してオブジェクトに物理演算で動きを追加します。
- 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/[email protected]/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をひとまず使用している
- 下記を開けば球体が転がる動きが確認できます
<!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/[email protected]/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 以外の選択肢を検討した方がよさそう…（今度やる）
Author And Source
この問題について(Aframeに物理演算フレームワークを導入する（aframe-physics-system）), 我々は、より多くの情報をここで見つけました https://zenn.dev/szgk/articles/d5b5d42592c7da著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol