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

Posted 2021-05-03

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

目前，我只是用window.cancelAnimationFrame取消动画框架，但我注意到网上的几个片段，人们往往只是设置一个像stop到true的变量，然后在update循环内，它会是这样的：

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

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

答案

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

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