相机移动时更新对象的几何形状会导致毛刺-three.js

Question

I have a problem updating a vertex of a line in three.js

So, I want to have a line in my scene, that its start is always at the (0,0,0) and its end is always in a specific position of the users screen (in x,y coordinates).

What I do to achieve that (and I almost succeed) is to have an invisible plane looking always to the camera and also have its position always a little bit in front of the camera. The reason I do that is because I want the line to seem like "going towards" the user's screen. So I "send" a raycaster from the desired screen position (in x,y) and I check in which point of the plane it intersect and that's my 3D point in three.js scene. Then I update one of the 2 vertices of the line.

The problem

What I do works fine, the line end is where I want to be, but something in updating the camera and the vertex is not synchronized and causes some noticeable glitches. When I move the camera, the line do not update itself quickly and smoothly, and as a result I see the line in other position before I see it in the calculated and desireable one.

Please take a look at this jsfiddle I created to emulate the problem.

What can I do to avoid these glitches?

Thanks

code i use in 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;

Answer 1

when you raycast you set the raycaster from camera, you have to make sure the camera matrices are updated

simply add

camera.updateMatrixWorld();

before you call

raycaster.setFromCamera( new THREE.Vector2( x_, y_ ) , camera ); 

and the line will behave as you described