I am currently grappling with figuring out how to accurately determine the position of click events on the screen while using THREE.js alongside an Orthographic camera.
Unfortunately, the position that I have managed to calculate (similarly to what is described here) is not entirely accurate. It seems to be within the area of the mouse pointer but does not align perfectly with the tip.
In reviewing various online examples, it appears that this issue only affects orthographic cameras whereas for perspective cameras it functions correctly.
My question is whether this behavior is expected or if there might be an error in my code causing this misalignment. Is there a method to adjust the calculated position to accurately match the arrow tip?
function onDocumentMouseDown(event) {
event.preventDefault();
var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1);
projector = new THREE.Projector();
var ray = projector.pickingRay(vector, camera);
pointer.position = vector.clone();
pointer.position.z = 0;
renderer.render(scene, camera);
}
You can view a functioning example here