处理环中的元素答案

【问题标题】：Disposing of elements in a ring处理环中的元素
【发布时间】：2021-02-13 03:44:13
【问题描述】：

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

提前致谢！

【问题讨论】：

标签： three.js dispose destroy ring

【解决方案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()

【讨论】：