three.js(3)-k8凯发

上一篇中，我们了解了 three.js 构建的场景的坐标系。见：three.js(2)--坐标系

本篇，我们要让物体动起来。

如果要在场景中加入动画，那么首先要找到一种方法，使得场景可以以一定的时间间隔进行渲染。在 html5 和相应的 javascript api 出来之前，我们只能使用 setinterval 方法实现。比如，我们可以用 setinterval(render, 100) 设定每 100 毫秒调用一次 render 方法。而现在，我们更多会使用 requestanimationframe，requestanimationframe 是专门为实现高性能的帧动画而设计的一个 api。调用 requestanimationframe 后，它会要求浏览器根据自己的频率进行一次重绘，它接收一个回调函数作为参数，在即将开始的浏览器重绘时，会调用这个函数，并会给这个函数传入调用回调函数时的时间作为参数。简单的说，比如我们执行了 requestanimationframe(render)，浏览器将会在它下一次重绘时执行 render，浏览器自己会选择合适的时间使绘画过程平滑、高效。

setinterval vs. requestanimationframe

每次执行 animate，会给浏览器一个任务，让它在下一次重绘时再次执行 animate，这里的 requestanimationframe 很像 settimeout，只是不需要自己定义延时时间，由浏览器自己决定。每次 render 前，都会改变 cube.roation 和 sphere.position，这样两个物体就会动起来。效果如下：



看到这里，是不是已经了解动画的原理？就是帧动画，就是动画片！我们要做的就是在每次浏览器重绘之前改变物体的位置，只要能保证每次在 16.7ms 内完成修改(保证帧率为 60fps)，就能展示流畅的动画。

demo 在这里：//xngeer.frostbelt.cn/itemthreedemo/3.move.html

本篇介绍了如何展示一个简单的动画，我们约定在 demo 中都使用 requestanimationframe。有同学会问了：小妖，每一帧都是对物体的位置做一点微调，你的这些参数值是怎么来的？cube.rotation.x = 0.01; 为什么是 0.01？为了确定这个值需要不断的改代码刷页面吗？下一篇我们将介绍如何调试~

the end
本文已经被浏览： 次，获赞：  次
赞