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 it.

So far, i could catch the click event on all the renderer, means when i click on cube1 and cube2, the click belong the same 'cause it's bound to the renderer :)

My question is, how to bind the click event on each cube?

My relevant code is the following:

            //dom
    var containerPopUp=document.getElementById('popup');
    //renderer
    var rendererPopUp = new THREE.CanvasRenderer();
    rendererPopUp.setSize(420,200);

    containerPopUp.appendChild(rendererPopUp.domElement);
    //Scene
    var scenePopUp = new THREE.Scene();
    //Camera
    var cameraPopUp = new THREE.PerspectiveCamera(50,60/60,1,1000);

    cameraPopUp.position.z = 220;
    cameraPopUp.position.y =  20;
    //
    scenePopUp.add(cameraPopUp);

    //Add texture for the cube
    //Use image as texture
    var img2D = new THREE.MeshBasicMaterial({ //CHANGED to MeshBasicMaterial
    map:THREE.ImageUtils.loadTexture('img/2d.png') 
    });
    img2D.map.needsUpdate = true; //ADDED
    //Add Cube
    var cubeFor2D = new THREE.Mesh(new THREE.CubeGeometry(40,80,40),img2D);
    cubeFor2D.position.x =- 60;
    cubeFor2D.position.y = 20;

    scenePopUp.add(cubeFor2D);
    //
    var img3D = new THREE.MeshBasicMaterial({ //CHANGED to MeshBasicMaterial
    map:THREE.ImageUtils.loadTexture('img/3d.png') 
    });
    img3D.map.needsUpdate = true;
    var cubeFor3D = new THREE.Mesh(new THREE.CubeGeometry(40,80,40),img3D);
    cubeFor3D.position.x = 60;
    cubeFor3D.position.y=20;

    scenePopUp.add(cubeFor3D);
    //
    rendererPopUp.render(scenePopUp,cameraPopUp);
    //
    animate();

    rendererPopUp.domElement.addEventListener('click',testCall,false);//Here the click event is bound on the whole renderer, means what ever object in the renderer is clicked, the testCall method is called.

As you can see, cubeFor2D and cubeFor3D are contained in the renderer. I need to bind the click event on each mesh. I tried this with the threex.domevent.js:

var meshes  = {};
        meshes['mesh1'] = cubeFor2D;
        meshes['mesh1'].on('mouseover', function(event){

              //response to click...
              console.log('you have clicked on cube 2D');

        });

But it doesn't work, in the console, i got this error:

TypeError: meshes.mesh1.on is not a function

Of course, i included the API source code file:

    <script src="threex.domevent.js"></script>

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

Answer 2

1. Create a click handler

   window.addEventListener('click', onDocumentMouseDown, false);
   

2. Define the function onDocumentMouseDown, note that raycaster the difference in above answer is the index position of the object clicked!

   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 );
   console.log(scene.children);
   var intersects = raycaster.intersectObjects( scene.children );
   console.log(intersects[1]);
   if ( intersects.length > 0 ) {
       intersects[1].object.callback();
   }}
   

3. Define the Mesh object

   var mesh_menu_title = new THREE.Mesh(geometry_menu, materials_menu);
   mesh_menu_title.name = 'select_lang';
   mesh_menu_title.callback = function() { select_language();}
   scene.add(mesh_menu_title);
   

4. define the callback function

   function select_language(){
   var selectedObject = scene.getObjectByName("select_lang"); 
   scene.remove( selectedObject );
   var selectedObject = scene.getObjectByName("start");
   scene.remove( selectedObject );
   var selectedObject = scene.getObjectByName("menu");
   scene.remove( selectedObject );
   }
   

So this code above will handle specific object clicked inside my canvas, then callback a function, the "mesh.callback" and it will remove some scene childs from the canvas.

It doesn't work if you use intersects[0].object.callback(); because at the index 0 the stored object are the vertices.