用户使用 dat.gui 更改参数后在 three.js 中重新渲染几何图形

Question

当用户使用滑块更改线圈数量时，我正在尝试在画布中更新 3D 螺旋几何。我一直在使用 dat.gui 插件作为界面。如果我要更改几何外部的参数（例如 x 比例），我可以让它工作，但如果我尝试更改几何内部的参数，它不会更新。使用 console.log 我可以看到更新发生在存储在几何中的信息中，但画布没有更新。这是 dat.gui 界面的内容：

  const gui = new GUI()
  
  let guiControls = new function() {
    this.coils = 10
  }

  gui.add(guiControls, 'coils', 1, 15).onChange(regenerateGeometry)
  
  function regenerateGeometry() {
    let newGeometry = new THREE.Geometry()
 
    spiralSetup(newGeometry)

    mesh.geometry.dispose()
    mesh.geometry = newGeometry

    render()
  }

这就是我对螺旋几何的看法：

function spiralSetup(geometry) {
    for (let i = theta; i < t; i++) {
      let r = Math.exp((i / segments) * (1 / Math.tan(alpha)))
      let x = r * aa * Math.cos(i / segments) * Math.sin(beta)
      let y = r * aa * Math.sin(i / segments) * Math.sin(beta)
      let z = -r * aa * Math.cos(beta)
      
      geometry.vertices.push(new THREE.Vector3(x, y, z))
    }
  }
  
  spiralSetup(startGeometry)

  let material = new THREE.LineBasicMaterial({color: 0xBA42A5})
  let mesh = new THREE.Line(startGeometry, material)

  scene.add(mesh)

这个 jsfiddle 包含所有代码：https://jsfiddle.net/yjsnhf72/

Answer 1

问题是您正在更新 guiControls 类中的线圈，但没有更新变量 coils，然后更新变量 t。这是更新后的fiddle