title: Rendering issue in Three.js
body: <p>On rendering the 3d model in a specific zoom the model is rendered correctly , but when the model is moved far way from the camera, the the part of the model behind it is rendered</p>
  
  <p>Sets the renderer properties as,
      <code>
      Renderer.context.disable(Renderer.context.DEPTH_TEST);
      Renderer.autoClearDepth = true;
      Renderer.autoClearStencil = true;
      Renderer.sortObjects = true;
      Renderer.shadowMapCullFace = THREE.CullFaceBack;
      Renderer.shadowMap.enabled = true;
      Renderer.shadowMap.type = THREE.PCFSoftShadowMap;
      Renderer.gammaInput = true;
      Renderer.gammaOutput = true;</code></p>
  
  <p>on increasing the z value of the camera it is rendered properly as,
  <a href="https://i.stack.imgur.com/7HPy6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7HPy6.png" alt="enter image description here"></a></p>
  
  <p>but on decreasing the z value of camera , the blue textured 3d models comes over the white one,</p>
  
  <p><a href="https://i.stack.imgur.com/Sm3ed.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Sm3ed.png" alt="enter image description here"></a></p>