【A-Frame】物理演算のaframe-physics-systemを使う

A-Frameで物理演算

A-Frameを使ってオブジェクトを出したあとは物理演算をしたくなる。3Dだし。
参考ブログは安心と信頼とおはようからおやすみまでのVOYAGE GROUP VR室ブログとaframe physics。

【何が出るかな】aframe-physics-systemを使いWeb VRで物理演算をやってみる

aframe-physics-system

とりあえず球を出す

まずは球を出すだけのシンプルなものを作成。

【demo】

a-frameとaframe-physics-systemの2つを読み込んで、球と受けるステージを作る。
球は重力の影響を受けるように(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>

全然面白くない絵だけど、こんな簡単に物理演算できるって面白い。

test2

色々な形で出してみる

プリミティブな形を使えば色々表示でき、もちろんa-animationも使って物理演算できる。

【demo】

<!-- ひとつ浮かせてアニメーションを付けてみる -->
<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>
  • このエントリーをはてなブックマークに追加