动态创建和销毁 Three.js 场景，避免内存泄漏。

Question

假设我们有一个页面，上面有两个按钮，一个是创建，一个是销毁。当您单击“创建”时，下面的 Three.js 场景会动态添加到页面中并开始运行。点击“销毁”应该删除场景，释放所有缓冲区并释放所有内存等。 http://mrdoob.github.com/three.js/examples/webgl_test_memory.html 有没有人知道如何在不进行框架和更改网址的情况下实现这一点？

谢谢

- Alan

Answer 1

我认为你需要在几何体、材质和纹理中使用dispose()方法。

geometry.dispose();
material.dispose();
texture.dispose();

https://github.com/mrdoob/three.js/blob/master/examples/webgl_test_memory.html

- user3006521

Answer 2

JavaScript是一种垃圾回收语言。如果您不再引用某个对象（例如旧场景），则内存最终将被回收，除非实现中存在错误。您链接的页面似乎工作正常。

- Claudiu

---

谢谢Claudiu，但是即使我删除了所有的引用，内存仍然没有被释放。我不确定WebGL是否有不同的规则，实现中的错误或其他问题。我看到一些错误报告提到了这个问题，但并没有太具体的信息。 - Alan

你能否放置一个测试页面，以便我可以查看一下？ - Claudiu

尽管3D模型已从场景中卸载，但除非垃圾回收器将其删除，否则它们仍然存在于内存中。请参见以下stackoverflow线程，了解目前可用于在几个浏览器中调用GC的命令：https://dev59.com/c2kv5IYBdhLWcg3w91dF在Opera和Edge中，使用js GC命令很容易。对于Chrome，您必须先解锁该命令。对于Firefox，我没有找到任何直接的js命令（键入“about:memory”->“最小化内存使用率”）。 - Dimitrios Ververidis

Answer 3

对于这个问题，我自己也烦恼了很久，向Chrome和Three.js提出了错误报告，但是没有找到任何解决方法。

由于某些原因，即使经过很长时间，内存也不会释放，似乎有些东西一直指向内存块，因此垃圾收集器永远不会将其释放。

然而，以下是为我解决问题的方法：

1. 创建一个数组，用于保存添加到场景中的所有项目。
2. 每当您向场景中添加额外的项目时，请将其添加到此数组中。
3. 在销毁功能中，运行scene.remove('item name')以将它们从场景中删除。
4. 现在遍历数组并手动将所有项目设置为未定义。

按照这种方式，我能够从Three.js场景中获得超过600MB的RAM。

更新

Mr. Doob和WestLangley的答案 Memory leak with three.js and many shapes，我还没有用我的代码进行测试。

在webGLRenderer中，使用

scene.remove( mesh )

之后，您可以使用

renderer.deallocateObject( mesh );

您可以使用以下代码释放纹理：

renderer.deallocateTexture( texture );

- Gaurav

---

这在r69中可行吗？我认为渲染器不再拥有那些方法了。 - 0x_Anakin

不确定当前的更新情况，因为我自从r62以来就没有再进行过相关工作。 - Gaurav