如何在OBJLoader加载的对象上应用纹理?

时间:2015-11-19 16:32:35

标签: javascript three.js

我目前正在使用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);

正如你所看到的,我已经尝试了几种颜色,材质和纹理,但迄今为止没有任何效果。谁能告诉我如何将纹理应用到这个对象上?

1 个答案:

答案 0 :(得分:1)

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

object.traverse( function ( child ) {

    if ( child instanceof THREE.Mesh ) {

        child.material.map = texture;

    }

} );

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

three.js r.73