「这是我参与2022首次更文挑战的第9天，活动详情查看：2022首次更文挑战」

示例代码采用three.js-r73版本: cdnjs.cloudflare.com/ajax/libs/t…

以往的例子中，我们很少让物体动起来，即使动起来了，也很少讲这方面的知识。这里我们对让场景动起来做一些解释。

1. 相对运动

• 让我们先来复习一下物理知识，提问：运动的小车上，乘客是静止的还是运动的？
• 相对于道路上的人来说，乘客是运动的
• 相对于司机来说，乘客是静止的

• 结论：我们的场景中如果让一个物体运动起来，有两个条件
  1. 变化物体的位置
  2. 变化相机的位置

2. 渲染循环

• 物体运动还有一个关键点，就是要渲染物体运动的每一个过程，让它显示给观众。
• 渲染的时候，我们调用的是渲染器的render() 函数。代码如下：

renderer.render( scene, camera );

• 如果我们改变了物体的位置或者颜色之类的属性，就必须重新调用render()函数，才能够将新的场景绘制到浏览器中去。不然浏览器是不会自动刷新场景的。
• 如果不断的改变物体的颜色，那么就需要不断的绘制新的场景，所以我们最好的方式，是让画面执行一个循环，不断的调用render来重绘，这个循环就是渲染循环，在游戏中，也叫游戏循环。
• 调用requestAnimationFrame函数，传递一个callback参数，则在下一个动画帧时，会调用callback这个函数。

function animate() {
    render();
    requestAnimationFrame(animate);
}

3. 物体运动示例

1. 改变相机的位置

我们对之前的代码进行一下改写，没有改动的函数就不写了

// 初始化相机
var camera;
function initCamera() {
    camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
    camera.position.x = 0;
    camera.position.y = 0;
    camera.position.z = 600;
    camera.up.x = 0;
    camera.up.y = 1;
    camera.up.z = 0;
    camera.lookAt({
        x: 0,
        y: 0,
        z: 0
    });
}

// 初始化物体
var cube;
var mesh;
function initObject() {
    var geometry = new THREE.BoxGeometry(200, 200, 200);
    var material = new THREE.MeshLambertMaterial({ color: 0xFFFFFF });
    mesh = new THREE.Mesh(geometry, material);
    mesh.position = new THREE.Vector3(0, 0, 0);
    scene.add(mesh);
}

// three入口
function threeStart() {
    initThree();
    initCamera();
    initScene();
    initLight();
    initObject();
    animation();
}
// 定义循环
function animation() {
  	camera.position.x += 1;
    renderer.render(scene, camera);
    requestAnimationFrame(animation);
}

• 我们让相机向x轴方向移动，效果如下

codepen示例代码

2. 改变物体的位置

// 定义循环
function animation() {
    // camera.position.x += 1;
    mesh.position.x -= 1;
    renderer.render(scene, camera);
    requestAnimationFrame(animation);
}

• 我们让物体向x轴负方向移动,效果如下

codepen代码示例

4. 性能测试

• 提问：物体移动后，怎么评估程序的性能
• 关于性能：测试一个程序，性能上是否有瓶颈，在3D世界里，经常使用帧数的概念，首先我们来定义一下帧数的意义。
• fps (Frames Per Second) :视频或者动画每秒显示多少帧数。理论上，3D程序最大的帧数是显卡支持的刷新率。一般是60。
• 帧数：图形处理器每秒钟能够刷新几次，通常用fps（Frames Per Second）来表示。如下是每秒钟59次刷新的应用：

• 电影以每秒24张画面的速度播放
• 电视30fps
• 游戏最好在30fps以上
• 帧数越高，画面的感觉就会越好。所以大多数游戏都会有超过30的FPS。为了监视FPS，看看你的程序哪里占用了很多的CPU时间，就需要学习一下性能监视器。

1. 性能监视器Stats

• 在Three.js中，性能由一个性能监视器来管理，
• 一个监控程序：帧数、每帧时间、内存使用量的js库github.com/mrdoob/stat…
  • FPS：表示上一秒的帧数，这个值越大越好，一般都为60左右。
  • MS：渲染帧所需的毫秒数。数字越低越好。
  • **MB：**分配内存的字节数，可以在浏览器中添加--enable-precise-memory-info试一下可不可以
  • CUSTOM：用户自定义面板，一般用不到

2. 性能监视器Stats的使用

• 封装一个方法，直接调用

// 初始化性能监视器
function initStarts() {
    var stats = new Stats();
    stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
    // 将stats的界面对应左上角
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.left = '0px';
    stats.domElement.style.top = '0px';
    document.body.appendChild(stats.dom);
}

• setMode函数，参数为0的时候，表示显示的是FPS界面，参数为1的时候，表示显示的是MS界面。
• stats的domElement：表示绘制的目的地（DOM），波形图就绘制在这上面
• stats的begin函数和end函数，在你要测试的代码前面调用begin函数，在你代码执行完后调用end()函数，这样就能够统计出这段代码执行的平均帧数了。
• Stats的begin和end 函数本质上是在统计代码执行的时间和帧数，然后用公式fps=帧数/时间 ，就能够得到FPS
• Stats的这个功能，被封装成了一个更好的函数update，只需要在渲染循环中调用就可以了

function animation() {
    stats.begin();
    camera.position.x += 1;
    renderer.render(scene, camera);
    stats.end();
    requestAnimationFrame(animation);
}

• 性能监视器的截图如下所示:

• Stats的这个功能，被封装成了一个更好的函数update，只需要在渲染循环中调用就可以了

function animation() {
    camera.position.x += 1;
    renderer.render(scene, camera);
    requestAnimationFrame(animation);
    stats.update();
}

codepen示例代码

5. 使用动画引擎Tween.js来创建动画

• 上面介绍了通过移动相机和移动物体来产生动画的效果。使用的方法是在渲染循环里去移动相机或者物体的位置。如果动画稍微复杂一些，这种方式实现起来就比较麻烦一些了。
• 为了使程序编写更容易一些，我们可以使用动画引擎来实现动画效果。和three.js紧密结合的动画引擎是Tween.js,github仓库：github.com/sole
• github: github.com/tweenjs/twe…

function initTween() {
    new TWEEN.Tween(camera.position).to({ x: 400 }, 3000).repeat(Infinity).start()
}

• 上面这段代码的意思是，实例化TWEEN，把摄像机坐标传入
• to：要改变的坐标值，执行动画时间
• repeat：重复次数，Infinity为无限
• start：Start表示开始动画，默认情况下是匀速的将mesh.position.x移动到-400的位置。
• 在循环函数中，我们不需要改变相机位置，需要在渲染函数中去不断的更新Tween，这样才能够让mesh.position.x移动位置:

// 定义循环
function animation() {
    // camera.position.x += 1;
    renderer.render(scene, camera);
    TWEEN.update()
    stats.update();
    requestAnimationFrame(animation);
}

function threeStart() {
    initStarts()
    initThree();
    initCamera();
    initScene();
    initLight();
    initObject();
    initTween()
    animation();
}

• 其中的TWEEN.update()完成了让动画动起来到目标。如果不调用这个函数场景就不能动起来了。
• 实现效果：

codepen代码