【A-Frame】物理演算のaframe-physics-systemを使う
2017年5月22日A-Frameで物理演算
A-Frameを使ってオブジェクトを出したあとは物理演算をしたくなる。3Dだし。
参考ブログは安心と信頼とおはようからおやすみまでのVOYAGE GROUP VR室ブログとaframe physics。
【何が出るかな】aframe-physics-systemを使いWeb VRで物理演算をやってみる
とりあえず球を出す
まずは球を出すだけのシンプルなものを作成。
a-frameとaframe-physics-systemの２つを読み込んで、球と受けるステージを作る。
球は重力の影響を受けるように(dynamic-body)、ステージは受け皿にならなければいけないので、重力無視のオブジェクト(static-body)にする。
※a-sceneのphysics=”debug: true;”で赤い線引いてくれるらしい。球とステージ(見えにくいけど)線が引かれてる。
<html>
<head>
<meta charset="UTF-8">
<title>aframe-physics</title>
<script src="../aframe.min.js"></script>
<script src="./aframe-physics-system.min.js"></script>
</head>
<body>
<a-scene physics="debug: true;">
<a-entity dynamic-body geometry="primitive: sphere" position=" 0 4 -10" ></a-entity>
<a-entity static-body geometry="primitive: box; width: 300; depth: 300; height: 1" position="0 0 0" ></a-entity>
<a-sky color="blue"></a-sky>
</a-scene>
</body>
</html>
全然面白くない絵だけど、こんな簡単に物理演算できるって面白い。
色々な形で出してみる
プリミティブな形を使えば色々表示でき、もちろんa-animationも使って物理演算できる。
<!-- ひとつ浮かせてアニメーションを付けてみる -->
<a-cylinder static-body position=" 1 2 -10" >
<a-animation attribute="rotation"
dur="10000"
fill="forwards"
Easing="linear"
to="0 0 360"
repeat="indefinite"></a-animation>
</a-cylinder>