Facing issue with the dynamic line

Hello All,

This is my pen here i am trying to move the line in all the direction means along the mouse cursor but here it always come on the plane

Please some one can give me a quick help.


I am able to achieve the moment in all the direction by this code

const setRayCaster = (event) => {

  mouse.x = ( event.clientX / canvas.width ) * 2 - 1;

  mouse.y = - ( event.clientY / canvas.height ) * 2 + 1;

  // mouse.x = ((event.clientX - canvas.offsetLeft) / canvas.width) * 2 - 1;

  // mouse.y = -((event.clientY - canvas.offsetTop) / canvas.height) * 2 + 1;

  raycaster.setFromCamera( mouse, camera ); 

  pointOfIntersection = new THREE.Vector3( mouse.x, mouse.y, -1 ).unproject( camera );


But i see there is a gap in mouse and line please refer the screen shot


Here the blue circle is where my mouse cursor is please can some one help me to remove the gap i want the line follow exactly the mouse tip


Three js team any thoughts on this or any help

At first sight, your mousemove event listener vertexSnappingOnMouseMove() is wrong. The current signature is:

const vertexSnappingOnMouseMove=(container,event)=>{ 

However, the first parameter is always the event. It should be:

const vertexSnappingOnMouseMove=(event)=>{ 

Thanks for response here my question is about the distance from the cursor and the line as i showed in the screen shot my mouse cursor is not along with the line