1var projector, mouse = { x: 0, y: 0 };
 2
 3
 4
 5
 6// initialize object to perform world/screen calculations
 7projector = new THREE.Projector();
 8
 9// when the mouse moves, call the given function
10document.addEventListener( 'mousedown', onDocumentMouseDown, false );
11
12function onDocumentMouseDown( event )
13{
14	// the following line would stop any other event handler from firing
15	// (such as the mouse's TrackballControls)
16	// event.preventDefault();
17
18	console.log("Click.");
19
20	// update the mouse variable
21	mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
22	mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
23
24	// find intersections
25	// create a Ray with origin at the mouse position
26	//   and direction into the scene (camera direction)
27	var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
28	projector.unprojectVector( vector, camera );
29	var ray = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
30	// create an array containing all objects in the scene with which the ray intersects
31	var intersects = ray.intersectObjects( targetList );
32
33	// if there is one (or more) intersections
34	if ( intersects.length > 0 )
35	{
36		console.log("Hit @ " + toString( intersects[0].point ) );
37		// change the color of the closest face.
38		intersects[ 0 ].face.color.setRGB( 0.8 * Math.random() + 0.2, 0, 0 );
39		intersects[ 0 ].object.geometry.colorsNeedUpdate = true;
40	}
41}
42
43function toString(v) { return "[ " + v.x + ", " + v.y + ", " + v.z + " ]"; }