title: Three.js/WebGL: Large spheres appear broken at intersection
body: <p>Let me preface this with saying I'm very inexperienced with 3D graphics.</p>
  
  <h2>Problem</h2>
  
  <p>I'm using Three.js. I have two spheres which (deliberately) collide in my WebGL model. When my spheres are incredibly large, the overlapping spheres appear "broken" where they intersect, but smaller spheres render perfectly fine.</p>
  
  <p>I have a very specific reason for using such large units for some objects, and scaling down objects isn't really an option.</p>
  
  <h2>Example</h2>
  
  <p><img src="https://i.stack.imgur.com/xRBEn.png" alt="enter image description here"></p>
  
  <p>Here is a fiddle for the larger spheres: <a href="http://jsfiddle.net/YSX7h/" rel="noreferrer">http://jsfiddle.net/YSX7h/</a> </p>
  
  <p>and for the smaller ones: <a href="http://jsfiddle.net/7Lca2/" rel="noreferrer">http://jsfiddle.net/7Lca2/</a></p>
  
  <h2>Code</h2>
  
  <pre><code>var radiusUnits = 1790; // 179000000
  var container;
  var camera, scene, renderer;
  var clock = new THREE.Clock();
  var cross;
  var plane;
  var controls;
  var cube;
  var cubeMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff, vertexColors: THREE.VertexColors } );
  init();
  animate();
  
  function init() {
      camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 3500000);
      controls = new THREE.OrbitControls(camera);
      camera.position.set(2000, 2000, 2000);
      camera.position.z = 500;
      scene = new THREE.Scene();
  
      var texture = THREE.ImageUtils.loadTexture('http://i.imgur.com/qDAEVoo.jpg');
      var material = new THREE.MeshBasicMaterial({
          color: 0xFFFFFF,
          map: texture,
          opacity:1
      });
  
      var material1 = new THREE.MeshBasicMaterial({ color: 0xFF0000, wireframe: true, opacity:1 });
      var geometry = new THREE.SphereGeometry(radiusUnits, 32, 32);
      var geometry1 = new THREE.SphereGeometry(radiusUnits, 32, 32);
      var mesh = new THREE.Mesh(geometry, material);
      var mesh1 = new THREE.Mesh(geometry1, material1);
      mesh1.position.set(0, 1000, 0);
      mesh.position.set(0, -1000, 0);
  
      scene.add(mesh);
      scene.add(mesh1);
  
      renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
  
      document.body.appendChild(renderer.domElement);
      renderer.setSize( window.innerWidth, window.innerHeight );
  }
  
  function onWindowResize() {
      renderer.setSize( window.innerWidth, window.innerHeight );
      render();
  }
  
  function animate() {
      controls.update();
      requestAnimationFrame( animate );
  }
  
  window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       ||
                  window.webkitRequestAnimationFrame ||
                  window.mozRequestAnimationFrame    ||
                  window.oRequestAnimationFrame      ||
                  window.msRequestAnimationFrame     ||
                  function( callback ){
                    window.setTimeout(callback, 1000 / 60);
                  };
  })();
  
  (function animloop(){
      requestAnimFrame(animloop);
      render();
  })();
  
  function render() {
      var delta = clock.getDelta(); 
      renderer.render( scene, camera );
  }
  </code></pre>
  
  <p>Why, exactly, does this happen? And is there anything I can do to fix this, short of scaling down these objects?</p>
  
  <p>Thanks in advance.</p>