I am currently working on updating a 3D spiral geometry in a canvas as the user adjusts a slider to change the number of coils. My approach involves using the dat.gui plugin for the interface. I have successfully implemented the slider to update an external parameter, such as the x-scale. However, I am facing difficulties when trying to update an internal parameter within the geometry. Although I can see the updates in the geometry data through console.log, the canvas itself does not reflect these changes. Below is the code snippet for the dat.gui interface:
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()
}
Here is the code snippet for the spiral geometry:
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)
You can find the complete code on this jsfiddle link: https://jsfiddle.net/yjsnhf72/