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

Question

我正在尝试在 canvas 中更新 3D 螺旋几何形状，因为用户使用 slider 来更改线圈数量。 我一直在使用 dat.gui 插件作为界面。 如果我更改几何外部的参数（例如 x 比例），我可以让它工作，但如果我尝试更改几何内部的参数，它不会更新。 使用 console.log 我可以看到更新发生在存储在几何中的信息中，但 canvas 没有更新。 这是 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 class 中的线圈，但没有更新变量coils ，然后更新变量t 。 这是更新的小提琴