什么是时钟对象?如果你对JavaScript有一定的了解,那么你一定对JavaScript时间对象Date不陌生。Clock本质上是对Date进行了封装,提供了一些方法和属性。当你通过Threejs写一些时间相关的程序时,不需要封装Date,直接调用Clock对象的方法和属性即可。Clock对象的主要属性和方法属性。autoStart,Boolean,默认值为true,如果设置为true,则时钟会在第一次更新时开启Attribute.startTime,Float,存储时钟Clock最后一次调用的时间。.start(),.getElapsedTime()or.getDelta()方法Attribute.elapsedTime,Float,保存时钟的总运行时间ClockAttribute.running,Boolean,判断时钟Clock是否运行method.start(),启动时钟,设置startTime和oldTime为当前时间,设置elapsedTime为0,设置running为truemethod.stop(),停止时钟,设置oldTime为当前时间方法.getElapsedTime(),获取次数时钟启动后秒数,放弃设置oldTime为当前时间,如果autoStart设置为true且时钟未运行,该方法同时启动时钟方法.getDelta(),设置为当前后从oldTime获取秒数,并将oldTime设置为当前时间。如果autoStart设置为true并且时钟没有运行,则该方法同时启动时钟常用方法:getDelta()获取该方法两次执行的时间间隔。假设你执行了一次.getDelta()方法,然后又执行了一次.getDelta()方法。第二次执行.getDelta()方法时,可以返回上次调用该方法与本次调用的时间间隔,返回间隔时间单位为秒简单应用场景:Threejs渲染方法的理解Threejs渲染器的渲染方式。render()每次执行都会得到一帧图片,渲染效果就是图片会显示在Canvas画布上。如果一个3D场景是不断变化的,就必须周期性地调用并执行.render()方法来更新画布显示内容,而逐帧图像随时间变化,所以展示一个动画效果是为了周期性的执行renderer渲染方法.render(),一般通过浏览器的APIwindow.requestAnimationFrame来实现,浏览器会控制渲染频率。通常,在理想的性能条件下,每秒渲染60次左右。在实际项目中,如果要渲染的场景比较复杂,一般会低于60,即两帧渲染帧的时间间隔大于16.67ms代码示例://创建一个时钟对象Clockvarclock=新三.时钟();//创建渲染函数functionrender(){//执行渲染方法渲染一帧图像renderer.render(scene,camera);//周期性的执行渲染函数requestAnimationFrame(render);//clock.getDelta()方法获取两帧之间的时间间隔,返回时间单位:秒varT=clock.getDelta();console.log('两帧渲染时间间隔',T*1000+'毫秒');console.log('查看每秒渲染频率',1/T);}render();关于requestAnimationFrame()方法window.requestAnimationFrame(callback)告诉浏览器你要执行一个动画,要求浏览器在下次重绘前调用指定的回调函数更新动画该方法需要传入一个回调函数作为参数,回调函数会在浏览器下次重绘之前执行当你准备更新动画时,你应该调用这个方法,它会让浏览器在下次重绘之前调用你的动画函数(也就是你的回调函数)传递给此方法通常每秒执行60次,但在大多数遵循W3C推荐的浏览器中,回调函数的执行次数通常与浏览器屏幕刷新次数相对应。匹配是为了提高性能和电池寿命,所以在大多数浏览器中,当requestAnimationFrame()运行在后台选项卡或隐藏的
