title: catch the click event on a specific mesh in the renderer
body: <p>I set a canvas renderer which contain two meshs (cubes). What i need to do is to <em><code>catch the click event on each cube</code></em> to call the convenient method for it.</p>
  
  <p>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 <code>renderer</code> :)</p>
  
  <p>My question is, how  to bind the click event on each cube?</p>
  
  <p>My relevant code is the following:</p>
  
  <pre><code>            //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.
  </code></pre>
  
  <p>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 <code>threex.domevent.js</code>:</p>
  
  <pre><code>var meshes  = {};
          meshes['mesh1'] = cubeFor2D;
          meshes['mesh1'].on('mouseover', function(event){
  
                //response to click...
                console.log('you have clicked on cube 2D');
  
          });
  </code></pre>
  
  <p>But it doesn't work, in the console, i got this error:</p>
  
  <pre><code>TypeError: meshes.mesh1.on is not a function
  </code></pre>
  
  <p>Of course, i included the API source code file:</p>
  
  <pre><code>    &lt;script src="threex.domevent.js"&gt;&lt;/script&gt;
  </code></pre>