My goal is to adjust the size of a circle by dragging a small GUI slider. I've developed this code which creates a circular shape with a blue outline on a black background using an orthographic camera:
setUpGUI();
let radius = 0.6;
let vertices = [];
for(let i = 0; i <= 360; i++){
vertices.push(new THREE.Vector3(Math.sin(i*(Math.PI/180))*radius, Math.cos(i*(Math.PI/180))*radius, 0));
}
let geometry = new THREE.BufferGeometry().setFromPoints(vertices);
let material = new THREE.LineBasicMaterial({color:"blue"})
var lineStrip = new THREE.Line( geometry, material );
In addition, I have created a setUpGUI() function that adds a slider to adjust the controls.radius value:
function setUpGUI() {
controls = { radius : 0.6
};
gui.add( controls, 'radius', 0.1, 0.7).onChange(value => updateRadius(value));
gui.open();
};
The onChange method triggers the updateRadius function and passes the new radius value as an argument:
function updateRadius(value) {
radius = value;
var vertices = [];
for(let i = 0; i <= 360; i++){
vertices.push(new THREE.Vector3(Math.sin(i*(Math.PI/180))*radius, Math.cos(i*(Math.PI/180))*radius, 0));
}
renderer.clear();
renderer.render(scene, camera);
}
However, there seems to be an issue with this code as it displays an error message saying "renderer is not defined". I attempted to resolve this by passing the renderer as a function parameter, but then encountered similar errors related to "scene" and "camera". I even included scene and camera as parameters in the function, but unfortunately, the circle still did not change its size.