three.js删除已经添加到场景上的模型、贴图等遇到的坑、 scene.remove（）没有把模型给删除，页面还存在这个元素，还可以看到

标签：item   删除   判断   分析   remove   foreach   释放   遇到   多个   

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（）没有把模型给删除，页面还存在这个元素，还可以看到

标签：item   删除   判断   分析   remove   foreach   释放   遇到   多个   

原文地址：https://www.cnblogs.com/sugartang/p/14538979.html