目标

  1. 让场景中的物体动起来
  2. 设置性能监视器

动起来的场景

1、动起来的原理

如何才能让场景的物体动起来?

利用现实例子来说明:我们看风景的时候,风景怎么动起来。

第一种方法:风景自己动起来。

第二种方法:我们自己动起来(应该说眼睛的移动)。

很好理解,这里代入一下,风景就是 Object 自身,也就是物体自己。我们的眼睛就相当于与 Camera。

2、渲染循环

关于物体移动还有一个关键的地方,就是要渲染物体运动的每个动作,才能显示给观看者,也就是需要不停的调用渲染器的 render() 函数。

如果改变了物体的位置或者颜色等属性,就必须重新调用 render() 函数,才能重新绘制新的场景到浏览器中。不然浏览器是不会显示改变后的图像的。

如果不断改变物体的属性,那么就需要不断的绘制新的场景,所以最好的方式就是让画面执行循环,不断调用 render 重绘,这个渲染就是 渲染循环,在游戏里也称为:游戏循环

为了实现循环,在 javascript 中,需要用到一个特殊函数:requestAnimationFrame

调用这个函数,是传递一个 callback 参数,则在下一个动画帧时,会调用 callback 这个函数了

这样就会不断调用 animate() 函数,而这个函数又会调用 requestAnimationFrame ,形成循环。在 render() 函数中不断 改变物体 或者 改变摄像机位置,并渲染他们,就能实现动画了。

3、我们动(相机动)

重点在于在 animation() 函数中,加入了:

相机向右移动,相当于物体向左移动了。

4、风景动(物体动)

基本只有一行代码不一样:

使物体不断向左移动。

性能监视器

关于性能:在 3D 渲染的世界里,有一个指标直接衡量性能,就是帧数的概念。

帧数:图形处理器每秒钟能够刷新的次数,通常用 FPS(Frames Per Second)来表示。

当物体快速移动时,人眼所看到的影像消失后,人眼仍能够保持其影像 1/24 秒左右的图像,这种现象被称为 视觉暂留现象 ,是人眼具有的一种性质。

毫无疑问,帧数越高,画面感就会越好,所以大多数游戏都有着超过 30FPS 的指标。

1、性能监视器 Stats

在 Threejs 中,性能由一个性能监视器来管理。

 

 

 

 

 

2、使用 Stats

在 Threejs 中,性能监视器 Stats 被封装在一个类中,这个类就叫 Stats,封装在 threejs/libs/stats.min.js 中,下面是使用方法的伪代码(不实用但有参考价值):

通过执行代码前调用 stats.begin() 函数,执行完后调用 stats.end() 函数,就可以统计出这段代码执行的平均帧数了。

3、实例

首先创建一个 stats 对象:

添加到 HTML 网页中:

调用 stats.update() 函数来统计时间和帧数: