Hi, I am implementing drag and drop on a GLB model. The problem I am encountering is that the mouse and model positions are not synced. There is a gap between their positions and when I move the model towards left and right the gap increases. Any information would be greatly appreciated.
Are you trying to drag a .glb model file onto the page, and have it land under the users mouse cursor?
Yes, I am trying to drag a glb model within the canvas, and sync its position with the cursor position. But when it raycasts and generates an offset, it is different than the mouse cursor position due to which there is a gap between cursor and model position
Right so you need to get the raycast position… then you load the GLB… then you do something like this:
let dropSpot = hits[0].point;
let bounds = new THREE.Box3().setFromObject(theGLB.scene);
let center = bounds.getCenter(new THREE.Vector3());
theGLB.scene.position.sub(center).add(dropSpot);
scene.add(theGLB.scene);
how does that sound?
the models are loaded first in the scene. Then we pick any of the model and start to drag and drop it. Their position is not aligned
Ohhh… I thought you meant dropping a 3d model file on the webpage. 
For mouse dragging issues like you just described… it’s usually a miscalculation in the raycaster or mouse position in your raycasting code.
Is your threejs app running full screen, or in a smaller div?
If its in a div, you may have to adjust your mouse coordinates to be relative to the canvas.