Three.js - Loading jpg texture on Mesh loaded from an OBJ file

Question

I have a human body mesh loaded with OBJMTLLoader, and I want to apply skin.jpg on it.

Loading the texture and OBJ file:

var texloader = new THREE.TextureLoader();
var skinTexture = texloader.load('/test/skin.jpg', function (tex) {
    skinTexture = tex;
    skinTexture.needsUpdate = true;
});
skinTexture.wrapS = THREE.RepeatWrapping;
skinTexture.wrapT = THREE.RepeatWrapping;
skinTexture.repeat.set( 4, 4 );


var loader = new THREE.OBJMTLLoader();

loader.load( '/test/body.obj', 'test/body.mtl', function ( res ) {
    body = res;

    var _body = body.children[0].children[1]
    _body.material = new THREE.MeshLambertMaterial( {
        map: skinTexture
    });
    _body.geometry.computeVertexNormals();

    scene.add( body );

}, onProgress, onError );

and I have a simple cube that I render the skin on:

    var cubeGeometry = new THREE.BoxGeometry( 1, 1, 1 );
    var cubeMaterial = new THREE.MeshPhongMaterial({
        map: skinTexture
    });
    cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
    scene.add( cube );

What I see is this:

The cube has the skin applied, but body only gets the colour of it somehow. If I change map: skinTexture to color: 0xff0000 the body changes colour, so parameter should be the correct one.

This is a closeup of the head, and cube on the background:

skin.jpg dimensions are 256x256.

Any ideas why the body doesn't get the same texture as the cube? Thank you

@alex No it doesn't, I guess it has to? I was expecting some sort of automatic tiling — Deniz Ozger, Jan 29 '16 at 14:19

score 1 · Accepted Answer · edited May 23 '17 at 10:28

The problem was the UVs. Thanks to @alex for mentioning, and @Tamlyn for posting and answer about how to generate them. The code I used is in this answer.

It looks like this:

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

Three.js - Loading jpg texture on Mesh loaded from an OBJ file

1 Answers1