three.js get double clicked 3d object

Question

Ciao, I am trying to accomplish this: I would be able to know wich 3d object is double clicked in my scene, and animate camera position to bring the object in the center of the screen.

I tried without success to adapt the interactive cubes example that uses raycaster and projector...

http://www.gioblu.com/GiO/web/solarsystem/index_backup

As you can see you can navigate in space and change camera position with right and left mouse button. I would be able to come back to initial camera position (earth in the center of the screen) with a double click on the planet.

PanChan PanChan · Accepted Answer · 2013-08-01T09:04:55

Why didn't you had success by adapting the example? What errors are occuring? Did you mean this example? Because raycaster and projector is the way you are looking for.

First of all you need an eventListener for the ondblclick Event on your container. In the event function you can copy&paste from the linked example:

1) Saving mouse coordinates

mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

2) Project coordinates to world system via the camera and create a ray

var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
projector.unprojectVector( vector, camera );
raycaster.set( camera.position, vector.sub( camera.position ).normalize() );

3) Check if the double clicked element is your planet

var intersects = raycaster.intersectObject( "your_planet" );
if ( intersects.length > 0 ) {
    reset your camera
}

Hope this helps!

three.js get double clicked 3d object

1 Answers