1.正常情况下,代码这样子写就行了
// 调用添加模型代码
myObjects.push(mesh)
// 调用删除模型代码
clearScene(myObjects)
/**
* 清除模型,模型中有 group 和 scene,需要进行判断
* @param scene
* @returns
*/
function clearScene(myObjects) {
// 从scene中删除模型并释放内存
if (myObjects.length > 0) {
for (var i = 0; i < myObjects.length; i++) {
var currObj = myObjects[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)
}
}
console.log(‘myObjects解决后‘)
console.log(myObjects)
}
// 删除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() // 删除材质
}
})
}
2.某些模型可以正常删除,但是某些精灵图,我发现居然删除不掉,经过分析,发现是因为模型的material是个数组,里边有多个材质需要挨个删除,经过修改,代码如下
// 删除group,释放内存
function deleteGroup(group) {
if (!group) return
// 删除掉所有的模型组内的mesh
group.traverse(function (item) {
if (item instanceof THREE.Mesh) {
if(Array.isArray(item.material)) {
item.material.forEach(a => {
a.dispose()
})
}else{
item.material.dispose() // 删除材质
}
item.geometry.dispose() // 删除几何体
}
})
}
完美解决问题~~~~
three.js删除已经添加到场景上的模型、贴图等遇到的坑、 scene.remove()没有把模型给删除,页面还存在这个元素,还可以看到