通过备案号查网站,淘宝优惠券网站建设,中国建设教育网站官方,校园网站建设成本推荐#xff1a;将NSDT场景编辑器加入你3D工具链其他工具系列#xff1a;NSDT简石数字孪生基于WebGL技术开发在线游戏、商品展示、室内漫游往往都会涉及到动画#xff0c;初步了解three.js可以做什么#xff0c;深入讲解three.js动画之前#xff0c;本节课先制作一个简单的…推荐将NSDT场景编辑器加入你3D工具链其他工具系列NSDT简石数字孪生基于WebGL技术开发在线游戏、商品展示、室内漫游往往都会涉及到动画初步了解three.js可以做什么深入讲解three.js动画之前本节课先制作一个简单的立方体旋转动画。 本节课是在1.1节 第一个3D场景已绘制好的立方体代码基础上进行更改。
周期性渲染
在1.1节中讲解过每执行一次渲染器对象WebGLRenderer的渲染方法.render()浏览器就会渲染出一帧图像并显示在Web页面上这就是说你按照一定的周期不停地调用渲染方法.render()就可以不停地生成新的图像覆盖原来的图像。这也就是说只要一边旋转立方体一边执行渲染方法.render()重新渲染就可以实现立方体的旋转效果。
为了实现周期性渲染可以通过浏览器全局对象window对象的一个方法setInterval(),可以通过window对象调用该方法window.setInterval()也可以直接以函数形式调用setInterval()。
setInterval()是一个周期性函数就像一个定时器每隔多少毫秒ms执行一次某个函数。
// 间隔20ms周期性调用函数fun
setInterval(render(),20)为了实现立方体旋转动画效果直接使用下面的代码代替1.1节中代码renderer.render(scene,camera);即可。
// 渲染函数
function render() {renderer.render(scene,camera);//执行渲染操作mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
}
//间隔20ms周期性调用函数fun,20ms也就是刷新频率是50FPS(1s/20ms)每秒渲染50次
setInterval(render(),20);上面代码定义了一个渲染函数render()函数中定义了三个语句通过setInterval(render(),20);可以实现m每间隔20毫秒调用一次函数render()每次调用渲染函数的时候执行renderer.render(scene,camera);渲染出一帧图像执行mesh.rotateY(0.01);语句使立方体网格模型绕y轴旋转0.01弧度。
渲染频率
调用渲染方法.render()进行渲染的渲染频率不能太低比如执行setInterval(render(),200);间隔200毫秒调用渲染函数渲染一次相当于每秒渲染5次你会感觉到比较卡顿。渲染频率除了不能太低也不能太高太高的话计算机的硬件资源跟不上函数setInterval()设定的渲染方式也未必能够正常实现。一般调用渲染方法.render()进行渲染的渲染频率控制在每秒30~60次人的视觉效果都很正常也可以兼顾渲染性能。
//设置调用render函数的周期为200ms刷新频率相当于5你能明显的感受到卡顿
setInterval(render(),200);函数requestAnimationFrame()
前面讲解threejs动画效果使用了setInterval()函数实际开发中为了更好的利用浏览器渲染可以使用函数requestAnimationFrame()代替setInterval()函数requestAnimationFrame()和setInterval()一样都是浏览器window对象的方法。
requestAnimationFrame()参数是将要被调用函数的函数名requestAnimationFrame()调用一个函数不是立即调用而是向浏览器发起一个执行某函数的请求 什么时候会执行由浏览器决定一般默认保持60FPS的频率大约每16.7ms调用一次requestAnimationFrame()方法指定的函数60FPS是理想的情况下如果渲染的场景比较复杂或者说硬件性能有限可能会低于这个频率。可以查看文章《requestAnimationFrame()》了解更多requestAnimationFrame()函数的知识。
function render() {renderer.render(scene,camera);//执行渲染操作mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度requestAnimationFrame(render);//请求再次执行渲染函数render}
render();均匀旋转
在实际执行程序的时候可能requestAnimationFrame(render)请求的函数并不一定能按照理想的60FPS频率执行两次执行渲染函数的时间间隔也不一定相同如果执行旋转命令的rotateY的时间间隔不同旋转运动就不均匀为了解决这个问题需要记录两次执行绘制函数的时间间隔。
使用下面的渲染函数替换原来的渲染函数即可rotateY()的参数是0.001*t也意味着两次调用渲染函数执行渲染操作的间隔t毫秒时间内立方体旋转了0.001*t弧度很显然立方体的角速度是0.001弧度每毫秒(0.0001 rad/ms 1 rad/s 180度/s)。CPU和GPU执行一条指令时间是纳秒ns级相比毫秒ms低了6个数量级所以一般不用考虑渲染函数中几个计时语句占用的时间除非你编写的是要精确到纳秒ns的级别的标准时钟程序。
let T0 new Date();//上次时间
function render() {let T1 new Date();//本次时间let t T1-T0;//时间差T0 T1;//把本次时间赋值给上次时间requestAnimationFrame(render);renderer.render(scene,camera);//执行渲染操作mesh.rotateY(0.001*t);//旋转角速度0.001弧度每毫秒}
render();
3D建模学习工作室
专注数字孪生、3D建模、3D仿真、虚拟现实
正在上传…重新上传取消3D建模学习工作室
