#はじめに
前回の記事では動的なオブジェクトの追加について書きました。
今回はアニメーションを追加してオブジェクトを動かしていきたいです。

#箱を上下に動かす

index.html

<html>
  <head>
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
  </head>
  <body>
    <a-scene background="color: #FAFAFA">
      <a-box id="box1" position="0 0.5 -3" height="1" color="#4CC3D9" shadow></a-box>
    </a-scene>

    <script>
        var box = document.getElementById("box1");
        var t = 0;
        function render() {
          t += 0.01;
          window.requestAnimationFrame(render);
          box.setAttribute('position', '0 '+(Math.sin(t*2)+1)+' -3');
        }
        render();
    </script>
  </body>
</html>

（参考）https://developer.mozilla.org/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame

#箱を右方向に動かし、一定以上動いたら箱追加
アニメーションと動的な追加を組み合わせて。

index.html

<html>
  <head>
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
    <script src="./js/jquery-3.4.1.min.js"></script>
  </head>
  <body>
    <a-scene background="color: #FAFAFA"></a-scene>
    <script>
        var boxes = [];
        function createBox() {
          var scene = document.querySelector('a-scene');
          var box = document.createElement('a-box');
          box.setAttribute('color', '#4CC3D9');
          box.setAttribute('position', '0 0 -3');
          scene.appendChild(box);
          boxes.push(box);
        }

        function move(box, x) {
          box.setAttribute('position', x + ' 0 -3');
        }

        function render() {
          window.requestAnimationFrame(render);
          for(var i = 0; i < boxes.length; i++)
          {
            var pos = boxes[i].getAttribute('position');
            var x = pos.x + 0.01;
            move(boxes[i], x);
            if(x > 2 && i == boxes.length - 1)
              createBox();
          }
        }

        createBox();
        render();
      </script>
  </body>
</html>

#おわりに
動いた。次回こそ何か簡単なゲームを作りたい。