如何在 OBJLoader 加载的对象上应用纹理？答案

【问题标题】：How to apply texture on an object loaded by OBJLoader?如何在 OBJLoader 加载的对象上应用纹理？
【发布时间】：2015-11-19 16:32:34
【问题描述】：

我目前正在使用three.js 处理我的小项目，但是我很难在THREE.OBJLoader 加载的对象上映射纹理。内置几何的three.js没有这样的问题。我现在真的很迷茫……

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

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

【问题讨论】：

标签： javascript three.js

【解决方案1】：

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

object.traverse( function ( child ) {

    if ( child instanceof THREE.Mesh ) {

        child.material.map = texture;

    }

} );

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

three.js r.73

【讨论】：

非常感谢！另外，如何检查模型是否有UV？
使用调试器检查网格几何数据结构。在此网站上搜索相关问题。