title: three.js PlaneGeometry and intersectObjects
body: <p>In <code>three.js</code>, I create a plane:</p>
  <pre><code>var planGeom = new THREE.PlaneGeometry( 5,5,1,1 );
  var planMat = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
  var plan = new THREE.Mesh( planGeom, planMat );
  </code></pre>
  <p>Then I set the vertices coordinates :</p>
  
  <pre class="lang-js prettyprint-override"><code>for(var i=0;i&lt;4;i++){
      planGeom .vertices[i].x =  myCoordsTab[i].x;   
      planGeom .vertices[i].y =  myCoordsTab[i].y;
      planGeom .vertices[i].z =  myCoordsTab[i].z;
  }
  </code></pre>
  <p>And finally :</p>
  <pre class="lang-js prettyprint-override"><code>scene.add( plan );
  </code></pre>
  <p>The plane appears at the good position in the 3D scene but when I output its position :</p>
  <pre class="lang-js prettyprint-override"><code>console.log(plan.position.x+' '+plan.position.y+' '+plan.position.z);
  </code></pre>
  <p>I get <code>(0,0,0)</code>.</p>
  <p>Then, when I try to check if I click on that plane with :</p>
  <pre class="lang-js prettyprint-override"><code>var vector = new THREE.Vector3( mousex, mousey, 0.5 );
  projector = new THREE.Projector();
  projector.unprojectVector( vector, camera );
  var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
  var intersects = ray.intersectObjects( scene.children );
  </code></pre>
  <p>it always returns that I clicked on the plane, wherever I clicked in the scene.
  I have no problem to check the clicks with a SphereGeometry for example.</p>
  <p>So how to check a click on a PlaneGeometry if it (apparently) always stays in (0,0,0), which makes that all clicks are considered to be on the plane?</p>
  <p>I use three.js 53, a very old version I know, but I work on a big project I started long time ago and there are too much things to change with the last version, so I hope that problem can be solved in version 53.</p>
  <p><strong>EDIT</strong> :</p>
  <p>Using</p>
  <pre class="lang-js prettyprint-override"><code>plan.geometry.verticesNeedUpdate = true;
  plan.geometry.computeCentroids();
  </code></pre>
  <p>I have now something which works but not in all cases.
  I have :</p>
  <pre class="lang-js prettyprint-override"><code>camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
  </code></pre>
  <p>If I define the vertices of my PlaneGeometry like that :</p>
  <pre class="lang-js prettyprint-override"><code>planGeom .vertices[0].x =  50;
  planGeom .vertices[0].y =  20;
  planGeom .vertices[0].z =  -20;
  
  planGeom .vertices[1].x =  50;
  planGeom .vertices[1].y =  20;
  planGeom .vertices[1].z =  20;
              
  planGeom .vertices[2].x =  50;
  planGeom .vertices[2].y =  -20;
  planGeom .vertices[2].z =  -20;
                                  
  planGeom .vertices[3].x =  50;
  planGeom .vertices[3].y =  -20;
  planGeom .vertices[3].z =  20;
  </code></pre>
  <p>the plane is in front of the camera (at distance 50, I can see the whole plane) and intersectObjects returns that I click on the plane wherever I click in the scene, and returns for each click :</p>
  <pre class="lang-js prettyprint-override"><code>(intersects[0].point.x, intersects[0].point.y, intersects[0].point.z) = (0, 0, 0)
  </code></pre>
  <p>But if I define it like :</p>
  <pre class="lang-js prettyprint-override"><code>planGeom .vertices[0].x =  -20;
  planGeom .vertices[0].y =  20;
  planGeom .vertices[0].z =  -50;
  
  planGeom .vertices[1].x =  20;
  planGeom .vertices[1].y =  20;
  planGeom .vertices[1].z =  -50;
              
  planGeom .vertices[2].x =  -20;
  planGeom .vertices[2].y =  -20;
  planGeom .vertices[2].z =  -50;
                                  
  planGeom .vertices[3].x =  20;
  planGeom .vertices[3].y =  -20;
  planGeom .vertices[3].z =  -50;
  </code></pre>
  <p>the plane is on the left of the camera and intersectObjects returns exactly the coordinates of the 3D point I click on and only when I click on the plane; one click on each corner returns the coordinates of the corresponding vertex. For example :</p>
  <pre class="lang-js prettyprint-override"><code>(intersects[0].point.x, intersects[0].point.y, intersects[0].point.z) = (planGeom .vertices[0].x, planGeom .vertices[0].y, planGeom .vertices[0].z)
  </code></pre>
  <p>A click in the center of the plane gives :</p>
  <pre class="lang-js prettyprint-override"><code>(intersects[0].point.x, intersects[0].point.y, intersects[0].point.z) = (0, 0, -50)
  </code></pre>
  <p>So now, I wonder why it doesn't work in all cases? I will do a simple example, which will be more simple than all those explanations :).</p>
  <p><strong>EDIT</strong></p>
  <p>Here is an example : the plane you see first, in front of the camera, returns an intersection for every click in the scene. The second plane, on the left (drag the scene to rotate), returns a good intersection point.
  <a href="http://jsfiddle.net/9ggk00so/1/" rel="nofollow noreferrer">http://jsfiddle.net/9ggk00so/1/</a></p>
  <p><strong>EDIT</strong></p>
  <p>Working code : <a href="http://jsfiddle.net/9ggk00so/3/" rel="nofollow noreferrer">http://jsfiddle.net/9ggk00so/3/</a></p>
  <p>Indeed, one instruction was missing :</p>
  <pre class="lang-js prettyprint-override"><code>plan.geometry.verticesNeedUpdate = true;
  plan.geometry.computeFaceNormals();//ok with that one
  plan.geometry.computeCentroids();
  </code></pre>