title: Three js plane geometry disappears when rotating
body: <p>I'm trying to create a very simple scene containing a triangular planar face continuously rotating about the x axis.</p>
  
  <p>Here's the code creating the geometry object, as indicated in this <a href="https://stackoverflow.com/questions/11020405/basic-2d-colored-triangle-using-three-js/11022909#11022909">previous SO question</a>:</p>
  
  <pre><code>// create triangular plane geometry
  var geometry_1 = new THREE.Geometry();
  var v1 = new THREE.Vector3(0,0,0);
  var v2 = new THREE.Vector3(3,0,0);
  var v3 = new THREE.Vector3(0,3,0);
  geometry_1.vertices.push(v1); 
  geometry_1.vertices.push(v2); 
  geometry_1.vertices.push(v3);
  geometry_1.faces.push(new THREE.Face3(0, 1, 2));
  </code></pre>
  
  <p>The animation function renders the scene and adds a small rotation to the mesh:</p>
  
  <pre><code>function animate() {
      requestAnimationFrame( animate );
      mesh_1.rotation.x += 0.005;
      renderer.render( scene, camera );
  }
  </code></pre>
  
  <p>Everything works fine until the value of <code>mesh.rotation.x</code> goes into the <code>[Math.PI, 2*Math.PI]</code> interval, at which point it disappears for exactly half of the cycle. This <a href="http://jsfiddle.net/9sjc1kbe/3/" rel="nofollow noreferrer">JSFiddle</a> replicates the behavior I'm observing.</p>
  
  <ul>
  <li>This is not a <code>light</code> problem, as there are an ambient light and a directional light supposed to illuminate the mesh at all points of it revolution.</li>
  <li>This should not be a <code>material</code> problem, as I did set its <code>side</code> property to <code>THREE.DoubleSide</code> and in fact in the interval <code>mesh.rotation.x</code> into <code>[0, Math.PI]</code> I already observe both faces.</li>
  <li>I tried adding another face to the same geometry with <code>geometry_1.faces.push(new THREE.Face3(0, 2, 1));</code> but that still didn't solve the problem.</li>
  <li>Adding a second geometry with an opposite face <code>geometry_2.faces.push(new THREE.Face3(0, 2, 1));</code> and having the mesh rotate negatively <code>mesh_2.rotation.x -= 0.005;</code> allows me to observe the desired result because the two geometries are now disappearing in opposite halves of the <code>[0, 2*Math.PI]</code> interval. This however is a hacky and not ideal solution.</li>
  </ul>
  
  <p>So what is going on? How can I solve it? Thanks!</p>