動かしてナンボ

WebGLで3DCG表現を行うのですから、やっぱり立体を動かしたくなりますよね。動かないのなら静止画をimg要素で置いとけばいいだけですもんね。動くだけならvideo要素で動画を置いとけばいいじゃんって言われるとその通りですので、今後はマウスやキーボード操作でインタラクティブに動かすところまで持っていきたいですが、とりあえずその前段階ってことでとにかく動いてもらいます。

const geometry = new THREE.BoxGeometry(100, 100, 100);
const material = new THREE.MeshNormalMaterial();
const box = new THREE.Mesh(geometry, material);
scene.add(box);

この間シーンに追加した箱↑を動かしてみます。

function draw() {
  box.rotation.y += 0.01;
  renderer.render(scene, camera);
  requestAnimationFrame(draw);
}

draw();

Three.js の何か特殊な処理を呼ぶわけでもなく、requestAnimationFrameで愚直に画面を更新していくだけでした。requestAnimationFrameはUIとは別スレッドで処理を行ってくれるやつですね。1秒間に60回くらい画面を更新してくれるようになるわけです。FPS（秒間コマ数）はマシンの状態によっては60コマを下回ることもありますので、アニメーションの時間経過の正確さが求められるゲームなんかでは時刻を使った同期処理なんかが関わってくる部分ですね。今は必要ないけど。

ちなみに動きの定義は箱メッシュのrotation.yを少しずつ増やしていくことで、Y軸に沿って回転移動をすることを表しています。この辺はThree.jsの力ですね。仕様のドキュメントをみるとQuaternionを使って、任意の軸に沿った回転なんかもできそうですね。