处理环中的元素

问题描述

我正在尝试在 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)

提前致谢！

解决方法

解决了！通过加入一个组，然后处理整个组:)

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),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()