元Webデザイナー兼コーダーの備忘録

ウェブデザインやプログラミング、ブログのカスタマイズなどについてアウトプットしています。

 メニュー

» HTML入門のまとめはこちらです。

【Three.js入門】アニメーション:requestAnimationFrame()

物体をアニメーションさせる処理について書きます。これで動きのあるものを作れるようになります。

アニメーション: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回描画していることを意味します。

参考サイト

» HTML入門のまとめはこちらです。