利用HTML5构筑物理模拟环境2.25

会飞的鱼

Three.js 实现动画



通过 WebGL，也能够像电视机一样连续绘制静态画像(frame)来实现动画效果。 WEB浏览器中能够按照一定时间间隔调用Javascript函数。最大可以支持60fps(fps就是一秒中的帧数）（译者注：这里是特定指用window.requestAnimationFrame这样的方式）。 当然根据所调用函数的执行时间，帧数可能会下降。接下来说一下具体如何实现动画效果。
使用「WINDOW.REQUESTANIMATIONFRAME」函数实现动画

「window.requestAnimationFrame」函数能够在一定时间间隔后调用指定函数。这个函数只有在所在浏览器页正在被浏览的时候才会执行，因此更加节省资源。
function loop() {

  （処理）

  window.requestAnimationFrame(loop);

}看下上面的例子就能明白，「window.requestAnimationFrame」和 loop 函数配合形成一个无限循环的调用。

function threeStart() {

  （処理）

  loop();

}按照这样连续绘制就实现了动画效果。