Three.js删除模型对象(.remove()和·dispose()方法)

通过Threejs开发Web3D应用的时候，可能需要删除场景中的模型对象，如果想从一个场景Scene或组对象Group删除一个三维模型对象，可以通过.remove()和·dispose()方法来实现。

删除场景对象中Scene一个子对象Group，并释放组对象Group中所有网格模型几何体的顶点缓冲区占用内存

// 递归遍历组对象group释放所有后代网格模型绑定几何体占用内存
group.traverse(function(obj) {
  if (obj.type === 'Mesh') {
    obj.geometry.dispose();
    obj.material.dispose();
  }
})
// 删除场景对象scene的子对象group
scene.remove(group);
.add()方法
通过.add()方法可以把一个模型或光源对象添加到场景Scene或组对象Group中，Three.js渲染器场景的时候，一个模型只有插入场景中才会被渲染出来显示在Canvas画布上。

// 一个网格模型插入到场景中
scene.add(Mesh)
// 一个光源对象插入场景中
scene.add(light)
 
// 一个网格模型插入到组对象中，作为group的子对象
const group = new THREE.Group()
group.add(mesh)
// group作为scene的子对象
scene.add(group)
.remove()方法
.add()方法是给父对象添加一个子对象，.remove()方法是删除父对象中的一个子对象。 一个对象的全部子对象可以通过该对象的.children()属性访问获得，执行该对象的删除方法.remove()和添加方法.add()一样改变的都是父对象的.children()属性。

场景Scene或组对象Group的.remove()方法threejs文档介绍可以参考它们的基类Object3D。

// 删除场景对象的子对象网格模型Mesh
scene.remove(Mesh)
// 删除场景对象的子对象光源对象
scene.remove(light)
// 删除父对象group的子对象网格模型mesh
group.add(mesh)
.remove()方法和.add()方法一样可以有多个参数对象,同时往父对象中添加多个子对象。

// 同场景插入多个对象
scene.add(light1,Mesh1,Mesh2)
// 一次删除场景中多个对象
scene.remove(light1,Mesh1,Mesh2)

  
 



     返回顶部