title: adding click event listener for a cube in 3js
body: <p>In my code I have two cubes, I want to add click event listener to them. for example alerting on which cube the user clicked. When I added the click event listener to the document it was worked perfectly, but when I added the same click event listener to the cube it isn't showing anything. Here is my part of code..</p>
  
  <pre><code>&lt;script type = "text/javascript" src = "three.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  var camera = new THREE.PerspectiveCamera(70,window.innerWidth/window.innerHeight,0.1,1000);
  var scene = new THREE.Scene();
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  
  document.body.appendChild(renderer.domElement);
  camera.position.z=30;
  
  var geometry = new THREE.CubeGeometry(10,10,10);
  var material = new THREE.MeshBasicMaterial({color:0x778899});
  var cube = new THREE.Mesh(geometry,material);
  cube.addEventListener("mousedown", onDocumentMouseDown, false);
  cube.position.x = -10;
  scene.add(cube);
  
  var cube1 = new THREE.Mesh(geometry,material);
  cube.addEventListener("mousedown", onDocumentMouseDown, false);
  cube1.position.x=10;
  scene.add(cube1);
  
  var render = function(){
      var timer = Date.now()*-0.0002;
      requestAnimationFrame(render);
      camera.position.x = 30* Math.cos(timer);
      camera.position.z = 30* Math.sin(timer);
  
      camera.lookAt(scene.position);
      renderer.render(scene,camera);
  };
  
  render();
  
  function onDocumentMouseDown(event){
      alert('hi');
  }
  &lt;/script&gt;
  </code></pre>