Converting screen point to point on equirectangular texture

Question

I have an equirectangular texture of a panorama that is applied to the inside of a sphere. The camera is placed at the centre of the sphere and the user can rotate the camera to look around by clicking and dragging their mouse. However, when the user clicks and does not drag, I would like to be able to convert the screen co-ordinates to co-ordinates on the texture. I could determine the location on the texture given a the location in the world coordinates the user clicked but looking over the Three.js documentation I am unable to discern how I would go about this.

Ultimately, the question is how would I go about constructing a ray query to get the point of intersection between a ray from a given screen point and the textured sphere?

Answer 1

There are a lot of examples of this in the three.js examples directory. For example, http://mrdoob.github.com/three.js/examples/canvas_interactive_cubes.html.

The pattern your want to google for is this:

var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );

projector.unprojectVector( vector, camera );

var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );

var intersects = ray.intersectObjects( objects );
if ( intersects.length > 0 ) {
    console.log( intersects[ 0 ].point );
}

This will work if the canvas is full browser. Also, objects is an array.

three.js r.53