乐趣区

关于javascript:了解Threejs中的Clock对象以及简单应用

jiezi

什么是 Clock 对象

如果你对 JavaScript 有肯定理解，那么 JavaScript 的工夫对象 Date 你肯定不生疏，Clock 实质上就是对 Date 进行封装，提供了一些办法和属性

当你通过 Threejs 编写一些和工夫相干程序时候，不必在对 Date 进行封装，间接调用 Clock 对象的办法和属性即可

Clock 对象的次要属性和办法

  • 属性.autoStart，Boolean，默认值是true，如果设置为true，则在第一次update 时开启时钟 Clock
  • 属性 .startTime ，Float，存储时钟 Clock 最初一次调用.start(), .getElapsedTime() 或.getDelta()办法的工夫
  • 属性.elapsedTime ，Float，保留时钟 Clock 运行的总时长
  • 属性.running ，Boolean，判断时钟 Clock 是否在运行
  • 办法 .start()，启动时钟，同时将startTime 和oldTime设置为以后工夫，设置 elapsedTime 为 0，并且设置 running 为true
  • 办法 .stop()，进行时钟，同时将oldTime 设置为以后工夫
  • 办法 .getElapsedTime()，获取自时钟启动后的秒数，摒弃将oldTime 设置为以后工夫，如果 autoStart 设置为 true 且时钟并未运行，则该办法同时启动时钟
  • 办法 .getDelta()，获取自oldTime 设置后到以后的秒数，同时将 oldTime 设置为以后工夫，如果 autoStart 设置为 true 且时钟并未运行，则该办法同时启动时钟

罕用办法：getDelta()

  • 取得前后两次执行该办法的工夫距离
  • 假如你执行一次 .getDelta () 办法，再执行一次 .getDelta () 办法，第二次执行 .getDelta () 办法时候，能够返回上次调用该办法到本次调用之间的工夫距离，返回间隔时间单位是秒

简略的利用场景：对 Threejs 渲染形式的了解

  • Threejs 渲染器的渲染办法 .render() 每执行一次就失去一帧图像，渲染成果也就是图像会显示在 Canvas 画布上
  • 如果一个三维场景是不停变动的，必定要周期性调用执行 .render() 办法，更新 canvas 画布显示内容，一帧帧图像随着工夫变动，这样就展示进去一个动画成果
  • 为了周期性执行渲染器渲染办法 .render()，个别通过浏览器的 APIwindow.requestAnimationFrame 实现，浏览器会管制渲染频率
  • 个别性能现实的状况下，每秒 s 渲染 60 次左右，在理论的我的项目中，如果须要渲染的场景比较复杂，个别都会低于 60，也就是渲染的两帧工夫距离大于 16.67ms

  • 代码示例：

    // 创立一个时钟对象 Clock
var clock = new THREE.Clock();
// 创立渲染函数
function render() {
  // 执行渲染办法，渲染进去一帧图像
  renderer.render(scene, camera);
  
  // 周期性执行渲染函数
  requestAnimationFrame(render);
  
  //clock.getDelta()办法取得两帧的工夫距离，返回工夫单位：秒
  var T = clock.getDelta();
  
  console.log('两帧渲染工夫距离',T*1000+'毫秒');
  console.log('查看每秒渲染频率',1/T);
}
render();

对于 requestAnimationFrame() 办法

  • window.requestAnimationFrame(callback)通知浏览器——你心愿执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画
  • 该办法须要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行
  • 当你筹备更新动画时你应该调用此办法，这将使浏览器在下一次重绘之前调用你传入给该办法的动画函数(即你的回调函数)
  • 回调函数执行次数通常是每秒 60 次，但在大多数遵循 W3C 倡议的浏览器中，回调函数执行次数通常与浏览器屏幕刷新次数相匹配
  • 为了进步性能和电池寿命，因而在大多数浏览器里，当 requestAnimationFrame() 运行在后盾标签页或者暗藏的 <iframe> 里时，requestAnimationFrame()会被暂停调用以晋升性能和电池寿命

  • 参数

    callback，下一次重绘之前更新动画帧所调用的函数 (即下面所说的回调函数)
    该回调函数会被传入 DOMHighResTimeStamp 参数，该参数与 performance.now() 的返回值雷同，它示意 requestAnimationFrame() 开始去执行回调函数的时刻

  • 返回值

    一个 long 整数，申请 ID，是回调列表中惟一的标识
    是个非零值，没别的意义，你能够传这个值给 window.cancelAnimationFrame() 以勾销回调函数

应用 setInterval() 和requestAnimationFrame()办法绘制的优劣

  • 当然应用 setInterval() 办法能够实现动画成果然而，setInterval()办法有肯定的毛病

    setInterval()办法，不思考浏览器中产生的事件，如果你正在浏览其余页面，这个函数依然会每隔几毫秒就会被调用一次，
    除此之外，setInterval()办法并没有跟显示器的重画同步，着可能会导致较高的 CPU 应用，升高零碎效率。—《Three.js 开发指南》

  • 应用 requestAnimationFrame() 函数即可解决上述问题，详情看上方 requestAnimationFrame() 函数形容，这个函数的工夫距离是浏览器定义的，咱们能够在指定的函数外面实现绘画操作

在 vue 中应用 requestAnimationFrame() 办法

肯定要传入函数名而不是带上立刻执行符号，如 requestAnimationFrame(this.animate) 即可

参考文档 ———— Three.js Clock

我是 fx67ll.com，如果您发现本文有什么谬误，欢送在评论区探讨斧正，感谢您的浏览！
如果您喜爱这篇文章，欢送拜访我的 本文 github 仓库地址，为我点一颗 Star，Thanks~ :)
转发请注明参考文章地址，非常感谢！！！

退出移动版