How to apply texture on an object loaded by OBJLoader?

问题

I'm currently working on my little project using three.js, but I am having hard time mapping texture on objects loaded by THREE.OBJLoader. There is no such problem for three.js built in geometry. I'm really confused now...

// Load the model from obj file [teapot, 74KB]
var onProgress = function ( xhr ) {
};

var onError = function ( xhr ) {
}; 

//var oCubeMap = THREE.ImageUtils.loadTexture(imageNames);

var objTexture = new THREE.ImageUtils.loadTexture(textureImage);
var oMaterial = new THREE.MeshLambertMaterial( { map: objTexture } );
var ooMaterial = new THREE.MeshPhongMaterial( { color: 0x99CCFF } );

var thisTexture = THREE.ImageUtils.loadTexture( textureImage, {}, function() {
    renderer.render(scene, camera);
} );

var loader = new THREE.OBJLoader();
loader.load(teapot, function (object) {
    object.position.set(8, -5, -25);
    object.scale.set(0.04, 0.04, 0.04);
    object.rotation.set(0, 180 * Math.PI / 180, 0);
    // object.color = '0x99CCFF';
    object.material = ooMaterial;
    // object.texture = thisTexture;
    scene.add(object);

}, onProgress, onError);

As you can see I've tried several things like color, material and texture but nothing worked so far. Can anyone tell me how to apply a texture onto this object?

回答1:

OBJLoader returns an object with children. Add the following to your loader callback function:

object.traverse( function ( child ) {

    if ( child instanceof THREE.Mesh ) {

        child.material.map = texture;

    }

} );

Make sure your model geometry has UVs, otherwise textures are not supported.

three.js r.73

来源：https://stackoverflow.com/questions/33809423/how-to-apply-texture-on-an-object-loaded-by-objloader

标签

javascript

three.js