CODEWITHSUNDEEP
three.jstexturesjpegplane
Eric Davies
Eric Davies

Reputation: 78

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

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);
}

Upvotes: 3

Views: 6718

Answers (2)

EProg
EProg

Reputation: 51

THREE.ImageUtils is already deprecated. (source)
Use THREE.TextureLoader().load('field.png') instead

Upvotes: 5

Miguel Xoel Garcia
Miguel Xoel Garcia

Reputation: 307

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);

Upvotes: 3

Related Questions