处理环中的元素

Question

我正在尝试在 Three.js 上创建一个球体环，并控制环中球体的数量。每次更改控件和运行功能时，我都想处理掉以前的环，以便可以用新的环代替。然而，虽然新环出现了，但似乎只有一个球体被处理掉了。解决方案看起来很简单，但我不明白出了什么问题：

const params = {}
params.num = 10

let geometry = null
let material = null
let sphere = null

function generateMandala() {

//Destroy Materials. This is the problem: only a single sphere is getting destroyed.
  if (sphere !== null) {
    geometry.dispose()
    material.dispose()
    scene.remove(sphere)
  }

  geometry = new THREE.SphereGeometry(0.25, 32, 32)
  material = new THREE.MeshBasicMaterial()

//Create Ring
  let radius = 2
  let angle = (Math.PI * 2) / params.num

  for (let i = 0; i < params.num; i++) {

    let x = Math.sin(i * angle) * radius
    let y = Math.cos(i * angle) * radius

    sphere = new THREE.Mesh(geometry, material)
    sphere.position.set(x, y, 0)

    scene.add(sphere)
  }
}

generateMandala()

gui.add(params, 'num').min(1).max(50).onFinishChange(generateMandala)

提前致谢！

Answer 1

已解决！通过添加到一个组中，然后处理整个组:)

let geometry = null
let material = null
let sphere = null
let group = null

function generateMandala() {

  if (sphere !== null) {
    geometry.dispose()
    material.dispose()
    scene.remove(group)
  }

  geometry = new THREE.SphereGeometry(0.25, 32, 32)
  material = new THREE.MeshBasicMaterial({
    color: new THREE.Color(1, random(0, 1), random(0, 1))
  })
  group = new THREE.Group();

  let radius = 2
  let angle = (Math.PI * 2) / params.num

  for (let i = 0; i < params.num; i++) {

    let x = Math.sin(i * angle) * radius
    let y = Math.cos(i * angle) * radius

    sphere = new THREE.Mesh(geometry, material)
    sphere.position.set(x, y, 0)

    group.add(sphere)
  }
  scene.add(group)
}

generateMandala()

处理环中的元素

Disposing of elements in a ring

three.js

dispose

destroy

ring