lampa lampa - 5 days ago 7
Javascript Question

webgl three.js get mouse position on Mesh

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

Have you tried with following ?

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