javascript - 尝试使用 Three.js 重置整个场景时性能下降

Question

在我当前的项目中，我使用 Threejs 构建带有网格的关卡。相机、场景、投影仪、渲染器等所有图形内容都在一个对象中完成。出于测试目的，我想用不同的参数重置整个场景，例如不同的级别大小。

因为我想要测量算法的时间，所以我想要“完全”重置。所以我目前的方法是删除包含场景/ Canvas 的 div-box 并删除具有 threejs 代码的整个对象。在此之后，我为图形级别实例化一个新对象。不幸的是，连续 10 次这样做会导致性能急剧下降。

我还尝试使用 scene.delete() 删除场景中的所有网格，并在删除整个对象之前删除场景、渲染器等内容。但仍然存在性能问题。

那么我怎样才能在不损失性能的情况下实现所有图形 webgl 组件的整体重置？

提前致谢。

Answer 1

删除与三个相关的所有内容并不能解决问题，因为即使您的 WebGLRenderer 被删除，它也永远不会释放它的 WebGL 上下文，因此您最终会同时运行多个 WebGL 上下文。每个额外的实时上下文都会降低性能。最终，会达到一个限制。

引用this question用于释放上下文的黑客方法。

three.js 不支持释放上下文，因为您真的不需要重新创建上下文。在我的例子中，在多个应用程序阶段使用 Angular，其中一些使用 WebGL 而另一些不使用，我只是在页面级 Controller 中保留一个渲染器实例，这样我就可以在子 Controller 中访问它，因此永远不需要重新创建WebGLRenderer 也不是上下文。