将模型加载到three.js时，如何提高性能？

Question

我试图将.stl文件加载到我的查看器中，然后使用three.js中包含的轨道控件来允许用户在文件周围移动相机，并从各个角度查看它。模型成功加载，但是，即使在高端系统上，绕部件运行也非常慢，并且观察者活动的时间越长，速度越慢。

我可以做些什么来提高观众的表现？

我无法为此制作jsFiddle，或者因为我的网站设置方式而使用Codepen，但它是在ethanhammond.github.io上播放，代码可以在github.com上查看/ethanhammond/ethanhammond.github.io。

这也是我第一次使用three.js，由于这个问题，我的代码可能会遇到一些问题。

Answer 1

你的问题就在这一行：

orbitControls.addEventListener( 'change', renderScene );

每次更改轨道控件都会启动一个新的渲染循环。所以到时候你有多个渲染循环。您需要将此行添加到change函数中，而不是收听renderScene事件：

orbitControls.update();

您还可以查看官方示例：misc_orbit_controls。它还说

//controls.addEventListener( 'change', render ); // add this only if there is no animation loop (requestAnimationFrame)