WebGL学习第二集 - 动起来

场景动起来的方法

 

第一种方法是让物体在坐标系里面移动，摄像机不动；第二种方法是让摄像机在坐标系里面移动，物体不动。这样场景就能够动起来了。

 

渲染循环

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

renderer.render( scene, camera );

 

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

 

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

function animation()
            {
                // 其中mesh就是指的物体，它有一个位置属性position，这个position是一个THREE.Vector3类型变量，所以你要把它向左移动，只需要将x的值不断的减少就可以了。这里我们减去的是1个单位。
			mesh.position.x-=1;
                renderer.render(scene, camera);
                requestAnimationFrame(animation);
            }
			mesh.position.x-=1;
                renderer.render(scene, camera);
                requestAnimationFrame(animation);
            }

function animation()
            {
                // renderer.clear();
                // 改变相机的位置，将相机不断的沿着x轴移动1个单位，也就是相机向右移动。相机向右移动
                camera.position.x =camera.position.x +1;
                // 另外，必须要重视render函数，这个函数是重新绘制渲染结果，如果不调用这个函数，那么即使相机的位置变化了，但是没有重新绘制，仍然显示的是上一帧的动画
                renderer.render(scene, camera);
                requestAnimationFrame(animation);
            }

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

 

 

性能评估

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

 

性能监视器Stats

在Three.js中，性能由一个性能监视器来管理，它的介绍在https://github.com/mrdoob/stats.js 可以看到。其中FPS表示：上一秒的帧数，这个值越大越好，一般都为60左右。点击上面的图，就会变成下面的另一个视图。MS表示渲染一帧需要的毫秒数，这个数字是越小越好。再次点击又可以回到FPS视图中。在Three.js中，性能监视器被封装在一个类中，这个类叫做Stats  （公式fps=帧数/时间）

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

 

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

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

转自：http://www.hewebgl.com/article/getarticle/58#