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

Question

我正在尝试让 3D 螺旋几何体在 canvas 中更新，因为用户使用滑块更改线圈数。我一直在使用 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。这是更新后的 fiddle

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

Re-render geometry in three.js after a user changes the parameters with dat.gui

javascript

canvas

three.js

dat.gui