three.js让场景动起来

让场景动起来

1、场景怎么会动起来

第一种方法是让物体在坐标系里面移动，摄像机不动。第二种方法是让摄像机在坐标系里面移动，物体不动。这样场景就能够动起来了。摄像机可以理解我们自己的眼睛。

2、渲染循环

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

1	renderer.render( scene, camera );

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

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

改变相机的位置，让物体移动

有了这些简单的基础知识，我们来实现一个动画效果。它的效果如下所示：

看箭头的方向，你会发现这个物体在向左边移动。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Three框架</title>
    <script src="/javascripts/three.min.js"></script>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>

</head>

<body>
<script>
  var renderer;
  function initThree() {
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setClearColor(0xFFFFFF, 1.0);
    document.body.appendChild( renderer.domElement );
  }
  var camera;
  function initCamera() {
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.x = 0;
    camera.position.y = 0;
    camera.position.z = 600;
  }
  var scene;
  function initScene() {
    scene = new THREE.Scene();
  }

  var light;
  function initLight() {
    light = new THREE.AmbientLight(0xFFFFFF);
    light.position.set(100, 100, 200);
    scene.add(light);
    light = new THREE.PointLight(0x00FF00);
    light.position.set(0, 0,300);
    scene.add(light);
  }

  var cube;
  function initObject() {
    var geometry = new THREE.CylinderGeometry( 100,150,400);
    var material = new THREE.MeshLambertMaterial( { color:0xFFFF00} );
    var mesh = new THREE.Mesh( geometry,material);
    mesh.position = new THREE.Vector3(0,0,0);
    scene.add(mesh);
  }
  function threeStart() {
    initThree();
    initCamera();
    initScene();
    initLight();
    initObject();
    animation();

  }
  function animation()
  {
    camera.position.x =camera.position.x +1;
    renderer.render(scene, camera);
    requestAnimationFrame(animation);
  }
  threeStart();
</script>
</body>
</html>

关注animation函数处的代码，其中有一句，这也是和前一个例子唯一不同的一句：

1	mesh.position.x-=1;

其中mesh就是指的物体，它有一个位置属性position，这个position是一个THREE.Vector3类型变量，所以你要把它向左移动，只需要将x的值不断的减少就可以了。这里我们减去的是1个单位。
Ok，分析完毕，很轻松吧。

物体运动后，怎么评估程序的性能

关于性能：测试一个程序，性能上是否有瓶颈，在3D世界里，经常使用帧数的概念，首先我们来定义一下帧数的意义。
帧数：图形处理器每秒钟能够刷新几次，通常用fps（Frames Per Second）来表示。如下是每秒钟59次刷新的应用：

当物体在快速运动时,当人眼所看到的影像消失后，人眼仍能继续保留其影像1/24秒左右的图像，这种现象被称为视觉暂留现象。是人眼具有的一种性质。人眼观看物体时，成像于视网膜上，并由视神经输入人脑，感觉到物体的像。一帧一帧的图像进入人脑，人脑就会将这些图像给连接起来，形成动画。
毫无疑问，帧数越高，画面的感觉就会越好。所以大多数游戏都会有超过30的FPS。为了监视FPS，看看你的程序哪里占用了很多的CPU时间，就需要学习一下性能监视器。

1、性能监视器Stats

在Three.js中，性能由一个性能监视器来管理，它的介绍在
https://github.com/mrdoob/stats.js可以看到。性能监视器的截图如下所示:

其中FPS表示：上一秒的帧数，这个值越大越好，一般都为60左右。点击上面的图，就会变成下面的另一个视图。

MS表示渲染一帧需要的毫秒数，这个数字是越小越好。再次点击又可以回到FPS视图中。

1、性能监视器Stats

在Three.js中，性能监视器被封装在一个类中，这个类叫做Stats，下面是一段伪代码，表示Stats的使用。

<script src="/javascripts/stats.min.js"></script>
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 );

你现在可以自己写一段代码，来验证一下，你的程序的帧数了。

Stats到底做了什么事情呢？我们来分析一下。

1、setMode函数
参数为0的时候，表示显示的是FPS界面，参数为1的时候，表示显示的是MS界面。
2、stats的domElement
stats的domElement表示绘制的目的地（DOM），波形图就绘制在这上面。
3、stats的begin函数
begin，在你要测试的代码前面调用begin函数，在你代码执行完后调用end()函数，这样就能够统计出这段代码执行的平均帧数了。

性能测试实例

Stats的begin和end 函数本质上是在统计代码执行的时间和帧数，然后用公式fps=帧数/时间，就能够得到FPS。Stats的这个功能，被封装成了一个更好的函数update，只需要在渲染循环中调用就可以了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Three框架</title>
    <script src="/javascripts/three.min.js"></script>
    <script src="/javascripts/stats.min.js"></script>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
<script>
  var renderer;
  var stats;
  function initThree() {
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setClearColor(0xFFFFFF, 1.0);
    document.body.appendChild( renderer.domElement );

    stats = new Stats();
    //stats.setMode(1); // 0: fps, 1: ms
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.left = '0px';
    stats.domElement.style.top = '0px';
    document.body.appendChild(stats.domElement);
  }
  var camera;
  function initCamera() {
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.x = 0;
    camera.position.y = 0;
    camera.position.z = 600;
  }
  var scene;
  function initScene() {
    scene = new THREE.Scene();
  }

  var light;
  function initLight() {
    light = new THREE.AmbientLight(0xFFFFFF);
    light.position.set(100, 100, 200);
    scene.add(light);
    light = new THREE.PointLight(0x00FF00);
    light.position.set(0, 0,300);
    scene.add(light);
  }

  var cube;
  function initObject() {
    var geometry = new THREE.CylinderGeometry( 100,150,400);
    var material = new THREE.MeshLambertMaterial( { color:0xFFFF00} );
    var mesh = new THREE.Mesh( geometry,material);
    mesh.position = new THREE.Vector3(0,0,0);
    scene.add(mesh);
  }
  function threeStart() {
    initThree();
    initCamera();
    initScene();
    initLight();
    initObject();
    animation();

  }

  function animation()
  {
    camera.position.x =camera.position.x +1;
    renderer.render(scene, camera);
    requestAnimationFrame(animation);
    stats.update();
  }
  
  threeStart();
</script>
</body>
</html>

代码的运行效果如下图所示，左上部，就是显示的帧计数器。

以上代码一共只有几个步骤：

1、new 一个stats对象，代码如下

1	stats = new Stats();

2、将这个对象加入到html网页中去，代码如下

stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);

3、调用stats.update()函数来统计时间和帧数。代码如下

1	stats.update();

当帧数较低的时候，你就要注意了，可能是你的代码性能太低了造成的。一般情况下，帧数都可以跑到60的。

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

上面介绍了通过移动相机和移动物体来产生动画的效果。使用的方法是在渲染循环里去移动相机或者物体的位置。如果动画稍微复杂一些，这种方式实现起来就比较麻烦一些了。
为了使程序编写更容易一些，我们可以使用动画引擎来实现动画效果。和three.js紧密结合的动画引擎是Tween.js,你可以再https://github.com/sole下载。
对于快速构件动画来说，Tween.js是一个容易上手的工具。首先，你需要引擎js文件，如下：

1	<-script src="../js/tween.min.js" data-ke-src="../js/tween.min.js"><-/script>

第二步，就是构件一个Tween对象，对Tween进行初始化，本例的代码是:

function initTween(){
    // 为位置创建一个补间//
   tween = new TWEEN.Tween( mesh.position)
    //然后告诉 tween 我们想要在3000毫秒内以动画的形式移动 x 的位置
            .to( { x: -400 }, 3000 ).repeat( Infinity ).start();
            
//tween.repeat(10); // 循环10次
//tween.repeat(Infinity); // 无限循环
// 启动
tween.start();
}

TWEEN.Tween的构造函数接受的是要改变属性的对象，这里传入的是mesh的位置。Tween的任何一个函数返回的都是自身，所以可以用串联的方式直接调用各个函数。
to函数，接受两个参数，第一个参数是一个集合，里面存放的键值对，键x表示mesh.position的x属性，值-400表示，动画结束的时候需要移动到的位置。第二个参数，是完成动画需要的时间，这里是3000ms。
repeat( Infinity )表示重复无穷次，也可以接受一个整形数值，例如5次。
Start表示开始动画，默认情况下是匀速的将mesh.position.x移动到-400的位置。

第三步是，需要在渲染函数中去不断的更新Tween，这样才能够让mesh.position.x移动位置:

function animation(){
    renderer.render(scene, camera);
    requestAnimationFrame(animation);
    stats.update();
    TWEEN.update();
}

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Three框架</title>
    <script src="/javascripts/three.min.js"></script>
    <script src="/javascripts/stats.min.js"></script>
    <script src="/javascripts/Tween.min.js"></script>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
<script>
  var renderer;
  var stats;
  function initThree() {
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setClearColor(0xFFFFFF, 1.0);
    document.body.appendChild( renderer.domElement );

    stats = new Stats();
    //stats.setMode(1); // 0: fps, 1: ms
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.left = '0px';
    stats.domElement.style.top = '0px';
    document.body.appendChild(stats.domElement);
  }
  var camera;
  function initCamera() {
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.x = 0;
    camera.position.y = 0;
    camera.position.z = 600;
  }
  var scene;
  function initScene() {
    scene = new THREE.Scene();
  }

  var light;
  function initLight() {
    light = new THREE.AmbientLight(0xFFFFFF);
    light.position.set(100, 100, 200);
    scene.add(light);
    light = new THREE.PointLight(0x00FF00);
    light.position.set(0, 0,300);
    scene.add(light);
  }

  var cube;
  function initObject() {
    var geometry = new THREE.CylinderGeometry( 100,150,400);
    var material = new THREE.MeshLambertMaterial( { color:0xFFFF00} );
    var mesh = new THREE.Mesh( geometry,material);
    mesh.position = new THREE.Vector3(0,0,0);

    var tween = new TWEEN.Tween( mesh.position)
      .to( { x: -400 }, 3000 ).repeat( Infinity ).start();
    scene.add(mesh);
  }
  function threeStart() {
    initThree();
    initCamera();
    initScene();
    initLight();
    initObject();
    animation();
  }
  

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

  threeStart();
</script>
</body>
</html>

使用动画引擎Tween.js来创建不规则动画

本节是一扩展的小结。如果对此不敢兴趣，可以跳过此节，也不影响学习。

上面讲的运动是直线运动，有时候我们需要曲线运动，例如下面图中的运动轨迹：

点击这里可以看到曲线运动方式。在实际工作中，经常是曲线运动，所以你有必要去快速掌握这些知识。

Y Blog服务器是收费的，感谢您的捐助。

three.js让场景动起来

three.js让场景动起来

让场景动起来

1、场景怎么会动起来

2、渲染循环

改变相机的位置，让物体移动

物体运动后，怎么评估程序的性能

1、性能监视器Stats

1、性能监视器Stats

性能测试实例

1、new 一个stats对象，代码如下

2、将这个对象加入到html网页中去，代码如下

3、调用stats.update()函数来统计时间和帧数。代码如下

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

使用动画引擎Tween.js来创建不规则动画

FEATURED TAGS

FRIENDS