three.js 场景中如何彻底删除模型和性能优化
删除外部模型
在three.js场景中，要彻底删除外部模型，需要执行以下几个步骤：
-
从场景中移除模型 你可以使用
scene.remove(model)或者scene.remove(model.children[0])将模型从场景中移除。如果是多个模型，可以用循环来处理。
移除所有材质和纹理 模型通常会包含材质和纹理，即使你把它们从场景中移除了，它们也仍然存在于内存中，所以你需要将它们全部移除。你可以使用如下代码来移除一个材质和对应的贴图：
|
1
2
3
4
|
material.dispose();if (material.map) { material.map.dispose();} |
如果模型有多个材质和纹理，同样需要使用循环来处理。
释放几何体和缓冲属性 在 WebGL 中，几何体和缓冲属性是直接存储在 GPU 中的，所以你需要手动释放它们以释放内存。你可以使用如下代码来释放一个几何体和对应的缓冲属性：
|
1
2
|
geometry.dispose();geometry.attributes = null; // 这些属性包括position, normal, uv等等 |
如果模型有多个几何体和缓冲属性，同样需要使用循环来处理。
手动断开引用 如果你使用了自定义的代码来创建模型，那么需要手动断开所有对该模型的引用，以便 JavaScript 的垃圾回收机制可以将其从内存中清除。
|
1
2
3
4
5
6
|
model.traverse((obj) => { if (!obj.isMesh) return; obj.geometry.dispose(); obj.material.dispose();});model = null; |
将 model 设置为 null 是确保该变量不会再被使用到了。
以上步骤都完成后，外部模型就完全被删除且不会占用内存。如果你发现不管用，那么请继续检查你的代码。dog！
优化技巧
除了彻底删除外部模型之外，还有一些方法可以帮助你优化内存使用。以下是一些优化技巧：
- 合并几何体 如果你的场景中有很多几何体，那么可以考虑将它们合并成一个大的几何体。这样可以减少渲染调用次数和减轻 GPU 的负担，从而提高性能和减少内存开销。
- 压缩纹理 纹理是占用内存最多的资源之一，因此对纹理进行压缩可以显著减少内存占用。three.js 内置了纹理压缩工具，可以使用其来生成压缩的纹理。
-
使用 LOD （Level Of Detail）技术 LOD 技术可以根据距离自动切换不同详细度的几何体，从而在远处显示简化的模型，优化渲染性能。这可以使用 three.js 自带的
THREE.LOD类实现。 -
移除不可见对象 如果某个模型或对象不可见，那么它就没有必要在场景中存在。你可以使用
visible属性或者 frustum culling 技术来判断对象是否可见，并及时移除不可见的对象，以避免内存浪费。
SO，你可以通过多种方式来优化内存使用和性能表现，在开发过程中尽可能避免浪费和不必要的资源占用。
注意事项
另外，还有一些常见的错误和注意事项需要注意：
- 内存泄漏 由于 JavaScript 是垃圾回收的语言，因此如果你不小心将对象保存在全局变量中或者忘记删除已经不再需要的对象，就可能会造成内存泄漏。这会导致内存占用无限制地增长，最终导致程序崩溃。因此，一定要时刻注意对象的生命周期，并及时删除不再需要的对象。
- 频繁创建和销毁对象 创建和销毁对象是一项开销很大的操作，因此应该尽量避免频繁创建和销毁对象。例如，在循环中创建对象会严重影响性能，因为每次循环都会重新分配内存空间。相反，可以在循环之前创建一个对象池，以重复使用对象。
- 不必要的递归 如果你编写了一个递归函数，请确保它的结束条件正确，并不陷入死循环。递归可能会不断创建新的函数调用，直到达到浏览器的最大调用栈大小。这会导致堆栈溢出错误。
总之，通过仔细规划代码结构、减少资源浪费和避免常见错误，可以极大地改善 three.js 应用的性能和可靠性。
three优化是一条不归路
以上就是详解Three.js 场景中如何彻底删除模型和性能优化的详细内容，更多关于Three.js 删除模型性能优化的资料请关注服务器之家其它相关文章！
原文链接：https://juejin.cn/post/7221339835952529467
