three.js planegeometry with texture map from jpg image is coming up black

Question

I'm trying to apply a texture to a planeGeometry using the three.js engine. I should be seeing a football field, I'm actually seeing black.

If I replace the map:texture argument with color:0x80ff80, I get a field of solid green, demonstrating that the geometry is in the correct place.

The page contains an which appears in the files before any scripts. I can display that image, demonstrating that there isn't a problem with the image.

The files are being served locally by an http server.

The code I'm using to build the material and PlaneGeometry is below. Any ideas appreciated. Thank you.

function buildField( fieldLength, fieldWidth, scene) {
    var image = document.getElementById("fieldTexture");
    var texture = new THREE.Texture(image);
    texture.minFilter = THREE.LinearFilter;
    var geometry = new THREE.PlaneGeometry(fieldLength, fieldWidth, 5, 5);
    var material = new THREE.MeshBasicMaterial( {map:texture, side:THREE.DoubleSide});
    var field = new THREE.Mesh(geometry, material);
    field.rotation.x = -Math.PI/2;
    scene.add(field);
}

Answer 1

Try this, own THREE.js methods usually work better...:

  texture = THREE.ImageUtils.loadTexture('field.png');
  material = new THREE.MeshBasicMaterial({map: texture});
  var field = new THREE.Mesh(geometry, material);