周期性渲染
每执行一次渲染器对象WEBGLRender的渲染方法.render(),浏览器就会渲染出一帧图像并显示在Web页面中,这就是说你按照一定的周期不停的调用渲染方法就可以不停的生成新的图像覆盖之前的图像。也就是说只要一边渲染立方体,一边执行渲染方法重新渲染就可以实现立方体的旋转效果。
为了实现周期性渲染可以通过浏览器全局对象window对象的一个方法setInterval(),可以通过window对象调用该方法,也可以直接以函数形式进行调用。
渲染频率
调用渲染方法进行渲染的频率不能太低,不然会感觉比较卡顿,也不能太高,计算机的硬件资源跟不上。一般调用渲染方法进行渲染的频率控制在每秒30—60次,人的视觉效果都很正常,也可以兼顾渲染性能。
函数requestAnimationFrame()
requestAnimationFrame()参数是将要被调用的函数的名称,requestAnimationFrame()调用一个函数不是立即调用而是向浏览器发起一个执行某函数的请求,什么时候执行由浏览器决定,一般默认保持60FPS的频率,大约每16.7ms会调用指定的回调函数。
均匀旋转
在实际执行程序的时候,可能requestAnimationFrame()请求的函数并不一定能按照理想的60FPS频率执行,两次执行渲染函数的时间间隔不一定相同,如果执行旋转指令的rotateY的时间间隔不同,旋转运动就不均匀,为了解决这个问题需要记录两次执行绘制函数的时间间隔。
1 | let T0 = new Date();//上次时间 |