three.js内存释放问题

问题描述

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

解决方法

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

​

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