在 ThreeJS 中删除 Mesh 对象的最佳实践？答案

【问题标题】：Best practice for removing Mesh objects in ThreeJS?在 ThreeJS 中删除 Mesh 对象的最佳实践？
【发布时间】：2020-05-31 09:02:04
【问题描述】：

ThreeJS 中创建网格（由几何体和材质组成）然后删除这些对象的常用方法有哪些？

我的用例是在旋转的 3D 地球仪上显示纬度/经度点。每个点都应该是可点击的并显示更多信息。显示的点也应该能够根据与 Vue 绑定的数据进行更改。

我目前正在使用类似的东西，但遇到了内存泄漏问题：

var material = new THREE.MeshPhongMaterial({
  color: 0xdc143c,
});

var cone = new THREE.Mesh(
  new THREE.ConeBufferGeometry(radius, height, 8, 1, true),
  material
);
cone.position.y = height * 0.5;
cone.rotation.x = Math.PI;

var sphere = new THREE.Mesh(
  new THREE.SphereBufferGeometry(sphereRadius, 16, 8),
  material
);

export default class Marker extends THREE.Object3D {
  constructor() {
    super();
    this.name = "Marker";
    this.add(cone, sphere);
  }

  destroy() {
    this.remove(cone, sphere);
  }
}

在 3 之上是否有库可以使网格/材料/几何的管理更简单？

【问题讨论】：

标签： vue.js three.js

【解决方案1】：

我所做的是在一些 utils 文件中创建一个函数，每当我需要处理网格时，我都会将网格作为函数参数传入：

    const removeMesh = (meshToRemove) => {

  meshToRemove.visible = false;
  scene.remove(meshToRemove);
  meshToRemove.geometry.dispose();
  meshToRemove.material.dispose();
  meshToRemove= undefined;

}

【讨论】：