title: Loaded texture appears blurred, or like a single color. How to make the texture crisp and sharp
body: <p>I am using three.js to make some basic 3D, I am loading a jpeg image as texture to apply on a custome geometry as shown:</p>
  
  <pre><code>var floor = new THREE.Shape([
                new THREE.Vector2 (300,  50),
                new THREE.Vector2 (450, 100),
                new THREE.Vector2 (650,  80),
                new THREE.Vector2 (700,  180),
                new THREE.Vector2 (980,  280),
                new THREE.Vector2 (900,  420),
                new THREE.Vector2 (850,  560),
                new THREE.Vector2 (600,  590),
                new THREE.Vector2 (500,  500),
                new THREE.Vector2 (370,  570),
                new THREE.Vector2 (200,  410),
                new THREE.Vector2 (10,  300),
                new THREE.Vector2 (100,  200),
                new THREE.Vector2 (230,  180),
              ]);
              var floorGeometry = new THREE.ExtrudeGeometry(floor, {
                bevelEnabled: false,
                amount: 10
              });
  
  
  
              var grass_1 = new THREE.ImageUtils.loadTexture("images/grass_1.jpg");
  
  
  
              var floorMaterial = new THREE.MeshPhongMaterial({
                  map:grass_1
              });
  
  
  
              var mesh = new THREE.Mesh(floorGeometry, floorMaterial);
                  mesh.rotation.x = -90 * Math.PI / 180;
                  mesh.position.x = -500;
                  mesh.position.z = 300;
                  mesh.receiveShadow = true;
                  scene.add(mesh);
  
                  var light = new THREE.DirectionalLight(0xFFFFFF, 1);
                  light.position.set(1, 3, 2);
                  scene.add(light); 
                  light.castShadow = true;
                  light.shadowDarkness = .1;
                  light.shadowMapWidth = 2048;
                  light.shadowMapHeight = 2048;
                  light.position.set(500, 1500, 1000); 
                  light.shadowCameraFar = 2500; 
  
                  light.shadowCameraLeft = -2000;
                  light.shadowCameraRight = 2000;
                  light.shadowCameraTop = 2000;
                  light.shadowCameraBottom = -1000;
  </code></pre>
  
  <p>Instead of a sharp grass texture, it appears like a blurred/ flat green fill.
  <img src="https://i.stack.imgur.com/NU7AI.jpg" alt="enter image description here"></p>
  
  <p>Texture used:</p>
  
  <p><img src="https://i.stack.imgur.com/DJxfe.jpg" alt="enter image description here"></p>
  
  <p>texture file is a 512 x 512 px jpeg file.</p>