内存泄漏和WebGLContext丢失

Question

我有一个 TypeScript React 组件，它使用 Three.js 加载多个 3D 模型，并根据后端数组 (data[frame]) 的值将它们显示在特定位置。我使用 useRef 创建渲染器和相机，并且还有 OrbitControls。我可以随意切换帧并查看所需的帧。但是，当查看大约 80-100 帧时，浏览器突然变黑几秒钟，然后黑色消失，然后在控制台中记录以下消息：

WebGL：CONTEXT_LOST_WEBGL：loseContext：上下文丢失

我清除了场景和渲染器，但这并不能真正帮助解决此错误。

return () => {
    renderer.current?.dispose();
    renderer.current?.clear();
    scene.clear();
};

我尝试停止在相机上使用 useRef 并禁用 OrbitControls。我还尝试不更改模型的位置，而是在其位置加载新模型。然而，由于后一种方法，事情只会变得更糟，所以我放弃了这个想法。 我发现前 20 帧的内存使用量约为每帧 1-10mb，但后来变成了 30-50mb。我关闭了缓存保存，但它根本没有帮助，有些东西正在某处保存，但我不知道什么以及在哪里

Answer 1

我通过清除包含模型（而不仅仅是场景）的组来解决我的问题