物体をアニメーションさせる処理について書きます。これで動きのあるものを作れるようになります。
アニメーション:requestAnimationFrame()
前回までのコードにアニメーション処理を追加します。animate関数を作りその中で、1.requestAnimationFrame()の呼び出し、2.回転処理、3.レンダリングの処理を記述します。通常は、1秒間に60回描画します。以下は、アニメーション処理の記述例です。
// アニメーション処理 function animate(){ requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } animate();
全コード
(function(){ 'use strict'; const width = 500; //表示領域の幅 const height = 250; //表示領域の高さ // Scene const scene = new THREE.Scene(); // Mesh = Geometry + Material const geometry = new THREE.BoxGeometry(50, 50, 50); const material = new THREE.MeshBasicMaterial( { color: 0x0000ff} ); const cube = new THREE.Mesh(geometry, material); cube.position.set(0, 0, 0); scene.add(cube); // Camera const camera = new THREE.PerspectiveCamera(45, width/height, 1, 1000); camera.position.set(200, 100, 300); camera.lookAt(scene.position); // Light const light = new THREE.AmbientLight(0xffffff); light.intensity = 2; light.position.set(1,1,1); scene.add(light); // Renderer const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(width, height); renderer.setClearColor(0xefefef); renderer.setPixelRatio(window.devicePixelRatio); document.getElementById('stage').appendChild(renderer.domElement); // renderer.render(scene, camera); ←コメントアウトする // アニメーション処理 function animate(){ requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } animate(); })();
補足
3DCGでは、専門用語が多くあります。もし3DCGをやっていくのでしたら、覚えておくと理解の助けになると思います。今回の記事で関連する用語は以下です。
- フレーム(数)
- フレームレート(fps:frame per second)
ちなみに60fpsは、1秒間に60回描画していることを意味します。