はじめに
前回の記事では動的なオブジェクトの追加について書きました。
今回はアニメーションを追加してオブジェクトを動かしていきたいです。
箱を上下に動かす
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>
箱を右方向に動かし、一定以上動いたら箱追加
アニメーションと動的な追加を組み合わせて。
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>
おわりに
動いた。次回こそ何か簡単なゲームを作りたい。