I'm currently working on a feature that involves loading a 3D model based on the mouse's position. Utilizing jQuery drag and drop functionality for this purpose has helped me load the model onto the canvas successfully, but I'm facing issues with making it snap to the exact mouse coordinates.
Although I've attempted to convert the 2D mouse coordinates to 3D coordinates using the code below, it's not yielding the precise position I need:
function convert2DTo3DSpace(event) {
var planeZ = new THREE.Plane(new THREE.Vector3(1500, 1500, 1500), 0);
var mv = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
var raycaster = projector.pickingRay(mv, camera);
var pos = raycaster.ray.intersectPlane(planeZ);
return pos;
}