Texture in Three.js

Question

I'm trying to apply a texture to the birds example in three.js.

  // instantiate a loader
  var loader = new THREE.TextureLoader();

  // load a resource
  loader.load('imgs/birdtexture.jpg', function (texture) {
     var material = new THREE.MeshBasicMaterial( {
     map: texture,
     side: THREE.DoubleSide
  });

  var bird = new THREE.Mesh( new Bird(), material);
);

For some reason this doesn't work and I don't get any errors .It seems I'm missing something. What am I doing wrong?

EDIT: I got it working by using UV as describe here. Here's the code:

  var texture = new THREE.TextureLoader().load("imgs/birdtexture.jpg");
  texture.wrapS = THREE.RepeatWrapping;
  texture.wrapT = THREE.RepeatWrapping;
  texture.repeat.set( 0.05, 0.05);

  var geometry = new Bird();

  function assignUVs(geometry) {

  geometry.faceVertexUvs[0] = [];

  geometry.faces.forEach(function(face) {

    var components = ['x', 'y', 'z'].sort(function(a, b) {
        return Math.abs(face.normal[a]) > Math.abs(face.normal[b]);
    });

    var v1 = geometry.vertices[face.a];
    var v2 = geometry.vertices[face.b];
    var v3 = geometry.vertices[face.c];

    geometry.faceVertexUvs[0].push([
        new THREE.Vector2(v1[components[0]], v1[components[1]]),
        new THREE.Vector2(v2[components[0]], v2[components[1]]),
        new THREE.Vector2(v3[components[0]], v3[components[1]])
    ]);

    });

    geometry.uvsNeedUpdate = true;
    }

    assignUVs(geometry);

    var bird = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial(     {map:texture, side: THREE.DoubleSide }));

Have you checked whether `imgs/birdtexture.jpg` is the correct path? — socialpiranha, Dec 11 '16 at 03:46
yes, it is. I used the texture with `var geoBox = new THREE.BoxGeometry( 10, 10, 10 );` and it worked. I think it has to do with UV's, but I'm not quite sure how to approach it — tres3, Dec 11 '16 at 04:40
Create your material outside of the load callback, Then in the callback just apply the texture. — 2pha, Dec 11 '16 at 05:02

score 0 · Accepted Answer · answered Dec 11 '16 at 05:05

0

Try this (untested):

  // instantiate a loader
  var loader = new THREE.TextureLoader();
  // Create material
  var material = new THREE.MeshBasicMaterial({side: THREE.DoubleSide});

  // load a resource
  loader.load('imgs/birdtexture.jpg',   function (texture) {
     marterial.map = texture;
  });

  var bird = new THREE.Mesh( new Bird(), material);
);

answered Dec 11 '16 at 05:05

2pha

9,798
2
29
43

thanks for that. But it didn't work. Although if I change the bird to `var bird = new THREE.BoxGeometry( 10, 10, 10 );` it does. – tres3 Dec 11 '16 at 05:33
Hard to know the problem then without seeing what the `Bird` function. – 2pha Dec 11 '16 at 11:23
Oh, I see you have fixed it. Personally, I would put all the `assignUVs` function inside the Bird class and call it from the constructor. Just to keep things clean, Maybe also the mesh generation so that `new Bird()` returned a mesh ready to go. – 2pha Dec 11 '16 at 11:31

Texture in Three.js

1 Answers1