three.js学习三——场景动画 - cytggit/Map-openlayers GitHub Wiki

动画方式

• 场景动起来的方法：

1. 让物体在坐标系里面移动，摄像机不动。

2. 让摄像机在坐标系里面移动，物体不动。

• 渲染循环：

不断的执行animate这个函数。也就是不断的执行render()函数。在render()函数中不断的改变物体或者摄像机的位置，并渲染它们，就能够实现动画了。

   function animate() {
     // 1.1、物体沿x轴左移
     line.position.x-=0.1;  
     // 1.2、整个场景的所有物体左移
     scene.position.x-=1;
     // 2、相机沿x轴右移（物体左移）
     camera.position.x =camera.position.x +1; 
     // 重新绘制渲染结果
     renderer.render( scene, camera ); 
     // 循环执行animate函数
     requestAnimationFrame( animate );
   } 

程序性能

• 介绍

在Three.js中，性能由一个性能监视器来管理：https://github.com/mrdoob/stats.js

1. FPS表示：上一秒的帧数，这个值越大越好，一般都为60左右。

2. MS表示：渲染一帧需要的毫秒数，这个数字是越小越好。

• 应用方式

  var stats = new Stats();
  stats.setMode(1); // 0: fps, 1: ms
  // 将stats的界面对应左上角
  stats.domElement.style.position = 'absolute';
  stats.domElement.style.left = '0px';
  stats.domElement.style.top = '0px';
  document.body.appendChild( stats.domElement );
  setInterval( function () {
      stats.begin();
      // 你的每一帧的代码
      stats.end();
  }, 1000 / 60 );
  

• 实例

  var stats = new Stats();
  stats.domElement.style.position = 'absolute';
  stats.domElement.style.left = '0px';
  stats.domElement.style.top = '0px';
  document.body.appendChild( stats.domElement );
      // 部分代码，只需调用update()函数
      function animation()
        {
            //renderer.clear();
            //camera.position.x =camera.position.x +1;
    mesh.position.x-=1;
            renderer.render(scene, camera);
            requestAnimationFrame(animation);
  
            stats.update();
        }