title: How to apply a texture to a custom geometry in Three.js
body: <p>I successfully applied a texture to a cube geometry with this:</p>
  
  <pre><code>var geometry = new THREE.CubeGeometry(10, 10, 10);
  var meshMaterial = new THREE.MeshPhongMaterial({ transparent: false, map: THREE.ImageUtils.loadTexture('/app/images/wood.jpg') });
  meshMaterial.side = THREE.DoubleSide;
  var mesh = new THREE.Mesh(geometry, meshMaterial);
  </code></pre>
  
  <p>With this I get a nice textured cube like this:</p>
  
  <p><a href="https://i.stack.imgur.com/0v1hU.png" rel="noreferrer"><img src="https://i.stack.imgur.com/0v1hU.png" alt="enter image description here"></a></p>
  
  <p>Now I want to apply the same texture (512x512 jpg image) to a custom model I'm loading from an STL and this is what I get (in this case a pyramid):</p>
  
  <p><a href="https://i.stack.imgur.com/uesOO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/uesOO.png" alt="enter image description here"></a></p>
  
  <p>This is the code:</p>
  
  <pre><code>loader.load(jsonParam.url, function (geometry) {
              var meshMaterial = new THREE.MeshPhongMaterial({ transparent: false, map: THREE.ImageUtils.loadTexture('/app/images/wood.jpg') });
              meshMaterial.side = THREE.DoubleSide;
  
              var mesh = new THREE.Mesh(geometry, meshMaterial);
  
              mesh.castShadow = false;
              mesh.receiveShadow = true;
              scene.add(mesh);
          });
  </code></pre>
  
  <p>Why the texture is not being applied and I get only what seems to be an average of the texture colors?</p>