用户使用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。这是最新的小提琴