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

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

上一篇:three.js一步一步来--线框渲染特效


下一篇:HTML5随手记