title: ThreeJS Texture is pixelated when seen from distance
body: <p>I was playing with webGL and ThreeJS, then I've got the following issue:</p>
  
  <p>Textures with large images gets pixelated when seen from distance.</p>
  
  <p>Check the example: <a href="http://jsfiddle.net/4qTR3/1/" rel="nofollow noreferrer">http://jsfiddle.net/4qTR3/1/</a></p>
  
  <p>Below is the code:</p>
  
  <pre class="lang-js prettyprint-override"><code>
      var scene = new THREE.Scene();
      var camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 10, 7000);
  
      var light = new THREE.PointLight(0xffffff);
      light.position.set(0, 150, 100);
      scene.add(light);
  
      var light2 = new THREE.AmbientLight(0x444444);
      scene.add(light2);
  
      var renderer = new THREE.WebGLRenderer({
          antialias: true
      });
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);
  
      var geometry = new THREE.PlaneGeometry(500, 500, 10, 10);
  
      //I use different textures in my project
      var texture = new THREE.ImageUtils.loadTexture(TEST_IMAGE);
      var textureBack = new THREE.ImageUtils.loadTexture(TEST_IMAGE);
  
      textureBack.anisotropy = renderer.getMaxAnisotropy();
      texture.anisotropy = renderer.getMaxAnisotropy();
  
      //Filters
      texture.magFilter = THREE.NearestFilter;
      texture.minFilter = THREE.LinearMipMapLinearFilter;
      textureBack.magFilter = THREE.NearestFilter;
      textureBack.minFilter = THREE.LinearMipMapLinearFilter;
  
      var materials = [
      new THREE.MeshLambertMaterial({
          transparent: true,
          map: texture,
          side: THREE.FrontSide
      }),
      new THREE.MeshLambertMaterial({
          transparent: true,
          map: textureBack,
          side: THREE.BackSide
      })];
  
      for (var i = 0, len = geometry.faces.length; i &lt; len; i++) {
          var face = geometry.faces[i].clone();
          face.materialIndex = 1;
          geometry.faces.push(face);
          geometry.faceVertexUvs[0].push(geometry.faceVertexUvs[0][i].slice(0));
      }
  
      planeObject = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
  
      planeObject.overdraw = true;
      planeObject.position.z = -5000;
  
      scene.add(planeObject);
  
      camera.position.z = 1000;
  
      (function render() {
          requestAnimationFrame(render);
          planeObject.rotation.y += 0.02;
          renderer.render(scene, camera);
      })();
  </code></pre>
  
  <p>If the image of the texture has got text in it, the text becomes very pixelated with poor quality.</p>
  
  <p>How can I fix this?</p>