You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

43 lines
1.4 KiB

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