title: Three.js - Cube and sphere clipping strangely with plane
body: <p>I'm having an issue where it looks like the cube and sphere are clipping with the plane. It seems to happen when I move the cube (using the keyboard) toward the back of the scene. It also happens when I use the trackball controls to move around the scene. Sometimes the cube and sphere are visible even when I turn the camera so I am looking at the bottom of the plane.</p>
  
  <p>Some code that might be of use, contains camera variables, creation of plane, sphere, and cube. I have images too: <a href="http://imgur.com/0VlZLmP" rel="nofollow">http://imgur.com/0VlZLmP</a></p>
  
  <pre><code>//CAMERA
  var SCREEN_WIDTH = window.innerWidth;
  var SCREEN_HEIGHT = window.innerHeight;
  var VIEW_ANGLE = 45;
  var ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT;
  var NEAR = 0.1;
  var FAR = 20000;
  
  //Renderer
  ShapeShifter.renderer = new THREE.CanvasRenderer();
  
  //Sphere
  var sphereGeometry = new THREE.SphereGeometry( 50, 32, 16 );
  var sphereMaterial = new THREE.MeshLambertMaterial( { color: 0x8888FF, overdraw: true } );
  ShapeShifter.sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
  ShapeShifter.sphere.position.set( 100, 50, -10 );
  ShapeShifter.scene.add( ShapeShifter.sphere );
  
  //Cube
  var cubeGeometry = new THREE.CubeGeometry( 50, 50, 50 );
  var cubeMaterial = new THREE.MeshBasicMaterial( { color: 0xFF4422 } );
  ShapeShifter.cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
  ShapeShifter.scene.add( ShapeShifter.cube );
  ShapeShifter.cube.position.set( -40, 50, 200 );
  
  //Floor
  var floorGeometry = new THREE.PlaneGeometry( 1000, 1000 );
  var floorMaterial = new THREE.MeshBasicMaterial( { color: 0x4DBD33, overdraw: true } );
  ShapeShifter.floor = new THREE.Mesh( floorGeometry, floorMaterial );
  ShapeShifter.floor.material.side = THREE.DoubleSide;
  ShapeShifter.floor.position.y = 0;
  ShapeShifter.floor.rotation.x = Math.PI / 2;
  ShapeShifter.scene.add( ShapeShifter.floor );
  </code></pre>