|
var projector, mouse = { x: 0, y: 0 };
|
|
|
|
|
|
|
|
|
|
// initialize object to perform world/screen calculations
|
|
projector = new THREE.Projector();
|
|
|
|
// when the mouse moves, call the given function
|
|
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
|
|
|
|
function onDocumentMouseDown( event )
|
|
{
|
|
// the following line would stop any other event handler from firing
|
|
// (such as the mouse's TrackballControls)
|
|
// event.preventDefault();
|
|
|
|
console.log("Click.");
|
|
|
|
// update the mouse variable
|
|
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
|
|
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
|
|
|
|
// find intersections
|
|
// create a Ray with origin at the mouse position
|
|
// and direction into the scene (camera direction)
|
|
var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
|
|
projector.unprojectVector( vector, camera );
|
|
var ray = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
|
|
// create an array containing all objects in the scene with which the ray intersects
|
|
var intersects = ray.intersectObjects( targetList );
|
|
|
|
// if there is one (or more) intersections
|
|
if ( intersects.length > 0 )
|
|
{
|
|
console.log("Hit @ " + toString( intersects[0].point ) );
|
|
// change the color of the closest face.
|
|
intersects[ 0 ].face.color.setRGB( 0.8 * Math.random() + 0.2, 0, 0 );
|
|
intersects[ 0 ].object.geometry.colorsNeedUpdate = true;
|
|
}
|
|
}
|
|
|
|
function toString(v) { return "[ " + v.x + ", " + v.y + ", " + v.z + " ]"; }
|