javascript - 如何在 OBJLoader 加载的对象上应用纹理？

Question

我目前正在使用 three.js 开发我的小项目，但我很难在 THREE.OBJLoader 加载的对象上映射纹理。 three.js内置geometry就没有这个问题。我现在真的很困惑......

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

如您所见，我已经尝试了多种方法，例如颜色、 Material 和纹理，但到目前为止都没有效果。谁能告诉我如何将纹理应用到这个对象上？

Answer 1

OBJLoader 返回一个带有子对象的对象。将以下内容添加到您的加载程序回调函数中:

object.traverse( function ( child ) {

    if ( child instanceof THREE.Mesh ) {

        child.material.map = texture;

    }

} );

确保您的模型几何体具有 UV，否则不支持纹理。

three.js r.73