catch the click event on a specific mesh in the renderer

by

You can generate a callback like this. First define your callback function for each object:

mesh.callback = function() { console.log( this.name ); }

Then follow the standard picking pattern:

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

function onDocumentMouseDown( event ) {

    event.preventDefault();

    mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;

    raycaster.setFromCamera( mouse, camera );

    var intersects = raycaster.intersectObjects( objects ); 

    if ( intersects.length > 0 ) {

        intersects[0].object.callback();

    }

}

EDIT: updated to three.js r.70

More Related Contents:

  1. “Cross origin requests are only supported for HTTP.” error when loading a local file
  2. THREE.js generate UV coordinate
  3. Three.js – Orthographic camera
  4. Drawing a line with three.js dynamically
  5. THREE.js : 2xMeshes using same vector as position
  6. How to rotate a 3D object on axis three.js?
  7. Rotate object on specific axis anywhere in Three.js – including outside of mesh
  8. Thickness of lines using THREE.LineBasicMaterial
  9. Using textures in THREE.js
  10. How to stop a requestAnimationFrame recursion/loop?
  11. Three JS – Find all points where a mesh intersects a plane
  12. How to get the absolute position of a vertex in three.js?
  13. Is it possible to enable unbounded number of renderers in THREE.js?
  14. Any way to get a bounding box from a three.js Object3D?
  15. Three.js Projector and Ray objects
  16. How to detect collision in three.js?
  17. Three JS Pivot point
  18. Three.js – Geometry on top of another
  19. Three.js/WebGL: Large spheres appear broken at intersection
  20. Convert 2:1 equirectangular panorama to cube map
  21. Three.js cube with different texture on each face
  22. Three.js and loading a cross-domain image
  23. How to save canvas animation as gif or webm?
  24. How to create a custom mesh on THREE.JS?
  25. Detect clicked object in THREE.js
  26. Determine if a mesh is visible on the viewport according to current camera
  27. How to render clipped surfaces as solid objects
  28. Threejs: assign different colors to each vertex in a geometry
  29. Three.js multiple materials on object loaded via OBJMTLLoader
  30. Apply color gradient to material on mesh – three.js

Leave a Comment