title: Orthographic camera and selecting objects with raycast
body: <p>I am running into a bit of difficulty selecting objects with the orthographic camera using the raycaster. Though, I have no problem with it when I use a perspective camera. The only thing I am changing when switching between the two is the type camera.</p>
  
  <p>I am able to select faces on the orthographic view, but it is only loosely related to where I am clicking on the screen. When I can click far away from the object and it will still come back as if it has hit the object near its center.</p>
  
  <p>Any ideas on what I am missing here?</p>
  
  <p>I am basing much of my code on this <a href="http://stemkoski.github.io/Three.js/Mouse-Click.html">example</a>, and am hoping to achieve a very similar result from my code. (this example I'm referencing uses the perspective camera)</p>
  
  <p>Any help is much appreciated</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;style&gt;
      canvas {
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        position: fixed;
        background-color: #111115;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body id='c'&gt;
    &lt;script src="js/three.js"&gt;&lt;/script&gt;
  
    &lt;script&gt;
  
      var obj = [];
      var mouse ={};
      var zoom = 2;
  
      var scene = new THREE.Scene();
  
      //switch between these two and see the difference:
      //var camera =  new THREE.OrthographicCamera(window.innerWidth / -zoom, window.innerWidth / zoom, window.innerHeight / zoom, window.innerHeight / -zoom, -1000, 1000);
      var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
  
      camera.position = new THREE.Vector3(100,100,100);
      camera.lookAt(new THREE.Vector3(0,0,0));
  
      // this material causes a mesh to use colors assigned to faces
      var material = new THREE.MeshBasicMaterial( 
      { color: 0xffffff, vertexColors: THREE.FaceColors } );
  
      var sphereGeometry = new THREE.SphereGeometry( 80, 32, 16 );
      for ( var i = 0; i &lt; sphereGeometry.faces.length; i++ ) 
      {
        face = sphereGeometry.faces[ i ]; 
        face.color.setRGB( 0, 0, 0.8 * Math.random() + 0.2 );     
      }
      obj['box'] = {};
      obj['box'] = new THREE.Mesh( sphereGeometry, material );
      obj['box'].castShadow = true;
      obj['box'].receiveShadow = true;
      scene.add(obj['box']);
  
      var ambientLight = new THREE.AmbientLight(0xbbbbbb);
      scene.add(ambientLight);
  
      var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
      directionalLight.position.set(-100, 40, 100);
      directionalLight.castShadow = true;
      directionalLight.shadowOnly = true;
      directionalLight.shadowDarkness = .5;
      scene.add(directionalLight); 
  
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.shadowMapEnabled = true;
      renderer.shadowMapSoft = true;
      document.body.appendChild(renderer.domElement);
  
      projector = new THREE.Projector();
      document.addEventListener( 'mousedown', onDocumentMouseDown, false );
      function onDocumentMouseDown( event ) {
        // the following line would stop any other event handler from firing
        // (such as the mouse's TrackballControls)
        // event.preventDefault();
  
        console.log("Click.");
  
        // update the mouse variable
        mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
        mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
  
        // find intersections
  
        // create a Ray with origin at the mouse position
        //   and direction into the scene (camera direction)
        var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
        projector.unprojectVector( vector, camera );
        var ray = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
  
        // create an array containing all objects in the scene with which the ray intersects
        var intersects = ray.intersectObjects( [obj['box']] );
  
        // if there is one (or more) intersections
        if ( intersects.length &gt; 0 )
        {
          console.log("Hit @ " + toString( intersects[0].point ) );
          console.log(intersects);
          // change the color of the closest face.
          intersects[ 0 ].face.color.setRGB( 0.8 * Math.random() + 0.2, 0, 0 ); 
          intersects[ 0 ].object.geometry.colorsNeedUpdate = true;
        }
      }
  
      function toString(v) { return "[ " + v.x + ", " + v.y + ", " + v.z + " ]"; }
  
      var render = function() {
        requestAnimationFrame(render);
        renderer.render(scene, camera);
      };
  
      console.log(camera);
      console.log(obj['box'])
      render();
  
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I am hoping it is something simple that I just don't know about yet.</p>
  
  <p>three.js r60</p>