Currently, I am utilizing the three.js framework and have set up the renderer within a div that occupies the right 50% of the screen with a height of 87.5%. My objective is to position a sphere at the exact spot where the user clicks, but I am encountering difficulties in accurately calculating the coordinates within this particular div. As a result, the spheres manifest in unpredictable locations far from the mouse pointer. How can I enhance the precision of coordinate calculation within this div? Any guidance or insights would be greatly appreciated. Below is the snippet of code for reference.
function onDocumentMouseMove( event ) {
event.preventDefault();
mouseX = (event.clientX / container.offsetWidth) * 2 - 1;
mouseY = -(event.clientY / container.offsetHeight) * 2 - 1;
}
function onDocumentMouseDown(event){
event.preventDefault()
alert("X: " + mouseX + " Y: " + mouseY);
var vector = new THREE.Vector3( mouseX, mouseY, 1 );
var sphere = new THREE.Mesh(new THREE.SphereGeometry(size / 4), new THREE.MeshLambertMaterial(intensity));
sphere.position.x = vector.x;
sphere.position.y = vector.y;
sphere.position.z = vector.z;
scene.add(sphere);
spheres.push(sphere);
}