title: three.js 2D mouseclick to 3d co-ordinates using raycaster
body: <p>I'm trying to draw 2D objects in z=0 plane, now I want to convert screen mouse co-ordinates into 3D world co-ordinates.</p>
  
  <p>I used camera below:</p>
  
  <pre><code>camera = new THREE.OrthographicCamera(SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2,         
  SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, NEAR, FAR );
  camera.position.set(0,0,500);
  camera.lookAt(scene.position);
  
  container = document.getElementById( 'ThreeJS' );
  container.appendChild( renderer.domElement );
  
  var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
  var  material = new THREE.MeshBasicMaterial({color: 0x000000, opacity: 1});
  var floor = new THREE.Mesh(floorGeometry, material);
  floor.position.set(0,0,0);
  scene.add(floor);
  targetList.push(floor);
  </code></pre>
  
  <p>I tried two ways:
  1.the answer of:[question]: <a href="https://stackoverflow.com/questions/13055214/mouse-canvas-x-y-to-three-js-world-x-y-z/13091694#">Mouse / Canvas X, Y to Three.js World X, Y, Z</a></p>
  
  <pre><code>var vector = new THREE.Vector3();
  vector.set(
  ( event.clientX / window.innerWidth ) * 2 - 1,
  - ( event.clientY / window.innerHeight ) * 2 + 1,
  0.5 );
  vector.unproject( camera );
  var dir = vector.sub( camera.position ).normalize();
  var distance = - camera.position.z / dir.z;
  var pos = camera.position.clone().add( dir.multiplyScalar( distance ) );
  </code></pre>
  
  <p>but it does't work for me!the pos is not the correct position in 3D world co-ordinates;To be honestly,I'm not understand this method actually...</p>
  
  <pre><code>2:
  mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
  mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
  var raycaster = new THREE.Raycaster();
  raycaster.setFromCamera(mouse, camera);
  var intersects = raycaster.intersectObjects(targetList);
  // if there is one (or more) intersections
  if ( intersects.length &gt; 0 )
  {
      console.log(intersects[0].point);
      console.log("Hit @ " + toString( intersects[0].point ) );
  }
  </code></pre>
  
  <p>This works right in normal place,but if add "width:300px;height:400px" #test div before #ThreeJS div,it went totally wrong position,WHY,WHY,WHY?</p>
  
  <p>Could someone give me a usable solution? </p>