Лучшая практика для удаления объектов Me sh в Three JS? - PullRequest
0 голосов
/ 29 мая 2020

Каковы некоторые общие способы в Three JS для работы с созданием сеток (состоящих из геометрии и материалов) и последующего удаления этих объектов?

Мой вариант использования - отображать точки широты и долготы на вращающийся трехмерный глобус. Каждая точка должна быть интерактивной и отображать дополнительную информацию. Отображаемые точки также должны иметь возможность изменяться в зависимости от данных, связанных с 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);
  }
}

Are есть ли библиотеки поверх Three, что упрощает работу с Meshes / Materials / Geometry?

1 Ответ

0 голосов
/ 31 мая 2020

Что я делаю, так это создаю функцию в каком-то файле utils, и каждый раз, когда мне нужно избавиться от меня sh, я передаю мне sh в качестве параметра функции:

    const removeMesh = (meshToRemove) => {

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

}
...