I am currently facing an issue with updating a vertex of a line in my three.js project.
My goal is to create a line within my scene where one end is fixed at (0,0,0) and the other end is set to a specific position on the user's screen (x,y coordinates).
To achieve this effect, I have implemented a solution where an invisible plane is always facing the camera and positioned slightly in front of it. This setup allows me to send a raycaster from the desired screen position (x,y) and determine the intersection point on the plane in order to update one of the vertices of the line.
The Issue
While my current approach does position the line end correctly, there seems to be a synchronization problem between updating the camera and the vertex, resulting in noticeable glitches. When I move the camera, the line fails to update quickly and smoothly, causing it to briefly appear in incorrect positions before settling into the desired location.
You can view a sample emulated version of the problem on this jsfiddle.
What steps can I take to address these glitches and improve the line rendering experience?
Thank you!
Below is the snippet of code used in the render function:
var cameToCenterScaled = camera.position.clone();
cameToCenterScaled.setLength(cameToCenterScaled.length()*0.9);
plane.position.set(cameToCenterScaled.x, cameToCenterScaled.y, cameToCenterScaled.z);
plane.lookAt(camera.position);
// define in pixels where in screen we want the line to end
var notePos = findNotePoint(120,30);
linemesh.geometry.vertices[ 1 ].set(notePos.x, notePos.y, notePos.z) ;
linemesh.geometry.verticesNeedUpdate = true;