Struggling to find a solution for the issue below, I could really use some assistance. Apologies for any mistakes in my English.
I have set up a map, added a camera, and implemented camera controls for all dimensions.
However, every time I try to determine the cursor's position relative to the mesh, the results vary depending on the viewing angle.
You can view the full code on jsfiddle.net: http://jsfiddle.net/BT3g3/
My code is designed to solely calculate the position as follows:
function onDocumentMouseMove(event) {
var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 1);
projector.unprojectVector( vector, camera );
var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
var intersect = ray.intersectObject( island );
if ( intersect.length > 0) { // !!
document.getElementById('z').value = intersect[0].point.z;
document.getElementById('x').value = intersect[0].point.x;
}
}
While searching online, I found a helpful article on capturing the cursor position on a map. However, I am struggling to integrate this method into my project.
Your assistance would be greatly appreciated. Please, help!