three.js内存释放问题

问题描述

在使用three.js渲染3D模型时，经常性的会遇到在连续添加模型后，导致浏览器崩溃的问题，经过排查，发现是浏览器占用了太多的内存，但是却一直没有释放，导致内存被耗尽而崩溃。

解决方法

排查到问题之后，相关操作为：当重新创建和加载模型时，需要释放内存的操作，具体操作如下：

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" contenteditable="false" cid="n5" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(255, 255, 255); position: relative !important; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">​</pre>

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" contenteditable="false" cid="n6" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(255, 255, 255); position: relative !important; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var meshList = [];
clearScene（）；                      //创建前进行之前添加的模型存储释放操作
for(var i = 0; i<100;i++) {
 var spherGeo = new THREE.CylinderGeometry(6, 6, 30, 40, 80);
 var spherMaterial = new THREE.MeshLambertMaterial({
 color: color,
 // wireframe: true
 })
 sphere = new THREE.Mesh(spherGeo, spherMaterial);
 meshList.push(sphere);
 sphere.position.set(pointData[i].x, pointData[i].y, pointData[i].z);
 //  sphere.rotation.x = 30;
 scene.add(sphere);
 renderer.render(scene, camera);                  //重新渲染界面加载模型
}
​
/**
 * 清除模型，模型中有 group 和 scene,需要进行判断
 * @param scene
 * @returns
 */
function clearScene(){
 // 从scene中删除模型并释放内存
 if(meshList.length > 0){ 
 for(var i = 0; i< meshList.length; i++){
 var currObj = meshList[i];

 // 判断类型
 if(currObj instanceof THREE.Scene){
 var children = currObj.children;
 for(var i = 0; i< children.length; i++){
 deleteGroup(children[i]);
 } 
 }else{ 
 deleteGroup(currObj);
 }
 scene.remove(currObj);
 }
 }
}
​
// 删除group，释放内存
function deleteGroup(group) {
 //console.log(group);
 if (!group) return;
 // 删除掉所有的模型组内的mesh
 group.traverse(function (item) {
 if (item instanceof THREE.Mesh) {
 item.geometry.dispose(); // 删除几何体
 item.material.dispose(); // 删除材质
 }
 });
}
​

参考文章： https://blog.csdn.net/ItChuangyi/article/details/85242427