let lineGeo = new THREE.Geometry();
let lineMat = new THREE.LineBasicMaterial({
color: 0x000000
});
lineGeo.vertices.push(
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(0, 10, 0),
);
let myLine = new THREE.Line(lineGeo, lineMat);
scene.add(myLine);
I am trying to update the endpoint of this line in a circular motion. In most programming languages, this is done by increasing a variable and updating the endpoint using radius * cos(dt) and radius * sin(dt). However, I'm facing difficulties with this approach in three.js:
let dt = 0;
function animate(){
dt += 0.01;
myLine.geometry.vertices[1].x = 10*Math.cos(dt);
myLine.geometry.vertices[1].z = 10*Math.sin(dt);
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
Note: I prefer not to use the myLine.rotation.z += 0.01 method for this task.