Javascript Three.js转换控件会导致延迟

我已经将变换控件添加到球体中，因此可以在场景中移动它。我还添加了环绕场景平移的动态观察控件，效果很好。第一次加载场景时，没有延迟，效果很好，但只要我移动球体，就会出现明显的延迟

我可以解决这个问题，但我真正想解决的是，即使我取消选择球体并且不再移动它，在使用轨道控制时仍然会出现延迟

• 为什么即使我没有积极使用转换控件，延迟仍会持续

我已尝试通过将以下内容放入

addControls（）

，从场景中删除变换控件：

在我移动球体一点后，我会按下一个键，变换控件将消失，但延迟仍在继续。 我预计在移动球体时可能会有一些延迟，但当球体不移动时，这种延迟就会消失

相反，即使我只使用轨道控制，仍然会有延迟

• 我怎样才能最大限度地减少这种滞后

---

欢迎来到StackOverflow
原因是每次控件获得

change

事件时，您都在堆叠对

requestAnimationFrame

的调用。调用

render

函数，该函数反过来会要求在每次帧更新时再次调用它。你可以想象它爆炸的速度有多快。即使在删除变换控件后，这也会导致延迟
若要修复此行为，应将渲染功能与动画循环解耦

function animate() {

  requestAnimationFrame( animate );

  render();

}

function render() {

  renderer.render( scene, camera );

}

现在，变换控制上的更改将仅渲染场景，而不会弄乱动画循环
尝试使用chrome devtools（性能）跟踪问题。

window.addEventListener( 'keypress', function ( event ) {

   transformControl.detach( object );
   transformControl.dispose();
   scene.remove(transformControl);

} );

function animate() {

  requestAnimationFrame( animate );

  render();

}

function render() {

  renderer.render( scene, camera );

}