I'm attempting to add a texture to the birds example in the three.js library.
// creating a loader instance
var loader = new THREE.TextureLoader();
// loading the texture 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);
);Unfortunately, my current approach doesn't seem to be working, and I'm not receiving any error messages. It appears that I might be overlooking something crucial. Can someone point out my mistake?
UPDATE: I managed to resolve the issue by implementing UV coordinates as explained here. Below is the revised 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 }));