THREE.js在不使用时暂停动画

时间:2018-05-21 18:31:03

标签: javascript three.js requestanimationframe

我正在用React构建我的THREE.js应用程序,我有两个组件,一个用THREE.js制作的轮播场景和一个全屏覆盖场景。当显示叠加层时,我想暂停旋转木马场景,因为它根本不可见。

目前,我只是使用window.cancelAnimationFrame取消动画框架,但我注意到网上的几个片段,人们往往只设置stoptrue之类的变量,然后在update循环内部,它将类似于:

update() {
  if (this.stop)
  this.renderer.render(this.scene, this.camera);
  this.frameId = window.requestAnimationFrame(this.update);
}

我想知道其中一个是否有比另一个更好的表现?就像取消&重新启动动画帧比仅保持动画循环更昂贵。

1 个答案:

答案 0 :(得分:0)

显然,使用cancelAnimationFrame会有更好的性能,因为您的处理器不必执行该功能并每秒检查this.stop 60次。然而,现代处理器是如此强大,运行简单的if()语句是微不足道的,你的性能差异将是微不足道的。

这两个选项都可以解决您的问题,因此给出答案更多的是意见问题,这超出了Stack Overflow的范围。