Question

Honestly, i tried to find solution for question below, please help me. And sorry for my English 🙂

I have created a map, added a camera + added camera control of all dimensions.

And when I get the position of the cursor relative to the mesh, the position is always different from different angles.

View all code in jsfiddle.net: http://jsfiddle.net/BT3g3/

I use Three.js r49.

This code is just responsible for calculating the position.

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;
    }
}

I was browsing internet and came across an article where the cursor position is caught on the map, but i fail move this method to my project 🙁

Please, help!

Answer 1

Have you tried with following ?

mouseX = ( ( event.clientX - canvas.offsetLeft ) / canvas.clientWidth ) * 2 - 1;
mouseY = - ( ( event.clientY - canvas.offsetTop ) / canvas.clientHeight ) * 2 + 1;