catch the click event on a specific mesh in the renderer

Question

I set a canvas renderer which contain two meshs (cubes). What i need to do is to catch the click event on each cube to call the convenient method for i

Answer 1

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