php销毁three.js量,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(); // 删除材质

}

});

}

​