Detect clicked object in THREE.js

by

Depends on what kind of camera are you using.

1) PerspectiveCamera: is ok link that Mr.doob provides.
2) OrthographicCamera: is quite different: 

var init = function() {
  camera = new THREE.OrthographicCamera( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, NEAR, FAR);
  document.addEventListener( 'mousedown', onDocumentMouseDown, false );
}

function onDocumentMouseDown( e ) {
  e.preventDefault();
  var mouseVector = new THREE.Vector3();
  mouseVector.x = 2 * (e.clientX / SCREEN_WIDTH) - 1;
  mouseVector.y = 1 - 2 * ( e.clientY / SCREEN_HEIGHT );
  var raycaster = projector.pickingRay( mouseVector.clone(), camera );
  var intersects = raycaster.intersectObject( TARGET );
  for( var i = 0; i < intersects.length; i++ ) {
    var intersection = intersects[ i ],
    obj = intersection.object;
    console.log("Intersected object", obj);
  }
}

More Related Contents:

  1. How to get camera position with mouse move event and transform into screen coordinates in three.js? [closed]
  2. THREE.js Ray Intersect fails by adding div
  3. Three.js – Width of view
  4. THREE.js : 2xMeshes using same vector as position
  5. Rotate object on specific axis anywhere in Three.js – including outside of mesh
  6. How to find the unicode of the subscript alphabet?
  7. Multiple transparent textures on the same mesh face in Three.js
  8. How to stop a requestAnimationFrame recursion/loop?
  9. Three JS – Find all points where a mesh intersects a plane
  10. How to get the absolute position of a vertex in three.js?
  11. Replicating MeshLambertMaterial Using ShaderMaterial ignores textures
  12. Three.js Projector and Ray objects
  13. Three.js – Geometry on top of another
  14. Three.js/WebGL: Large spheres appear broken at intersection
  15. Three.js cube with different texture on each face
  16. Three.js and loading a cross-domain image
  17. How to change face color in Three.js
  18. How to save canvas animation as gif or webm?
  19. How to get the global/world position of a child object?
  20. Orthographic camera and selecting objects with raycast
  21. catch the click event on a specific mesh in the renderer
  22. Three.JS wireframe material – all polygons vs. just edges
  23. How to create a custom mesh on THREE.JS?
  24. Determine if a mesh is visible on the viewport according to current camera
  25. Three.js add an object to a group but keep global position/rotation/scale as it was
  26. How to flip a Three.js texture horizontally
  27. Three.js multiple materials on object loaded via OBJMTLLoader
  28. Why do shaders have to be in html file for webgl program?
  29. How to toggle preserveDrawingBuffer in three.js?
  30. Apply color gradient to material on mesh – three.js

Leave a Comment