javascript - Three.js objloader + 纹理

Question

我已经使用 Three.js 几个星期了，我设法将纹理应用于直接通过代码创建的立方体，但是一旦我尝试使用 OBJLoader 加载 OBJ 文件，我注意到我无法使用相同的方法通过 TextureLoader 加载简单的 png 或 jpg 纹理。

现在我不完全确定出了什么问题，如果这不是正确的方法，如果我不能很好地加载简单的图像，或者如果我没有正确应用它。

我发现使用 MTL 文件应用纹理似乎很容易，但不幸的是我不确定如何制作。

我当前的代码看起来像这样:

        var loader = new THREE.OBJLoader( manager );
        loader.load( 'models/tshirt.obj', function ( object ) {

            object.position.x = 0;
            object.position.y = -200;
            object.scale.x = 10;
            object.scale.y = 10;
            object.scale.z = 10;
            obj = object;
            texture = THREE.TextureLoader('img/crate.png'),
            material = new THREE.MeshLambertMaterial( { map: texture } );
            mesh = new THREE.Mesh( object, material );
            scene.add( mesh );

        } );

但这似乎行不通。该模型无法加载并给我来自 Three.js 的随机错误。如果我更改 scene.add( obj); 而不是上面的代码，模型将实际加载。

我应该在这里做什么？我应该继续尝试制作 MTL 文件吗？

可以在 http://creativiii.com/3Dproject/old-index.html 查看我的完整工作代码

编辑:添加网格而不是对象时出现的错误是

three.min.js:436 Uncaught TypeError: Cannot read property 'center' of undefined

Answer 1

试试这段代码:

var OBJFile = 'my/mesh.obj';
var MTLFile = 'my/mesh.mtl';
var JPGFile = 'my/texture.jpg';

new THREE.MTLLoader()
.load(MTLFile, function (materials) {
    materials.preload();
    new THREE.OBJLoader()
        .setMaterials(materials)
        .load(OBJFile, function (object) {
            object.position.y = - 95;
            var texture = new THREE.TextureLoader().load(JPGFile);

            object.traverse(function (child) {   // aka setTexture
                if (child instanceof THREE.Mesh) {
                    child.material.map = texture;
                }
            });
            scene.add(object);
        });
});

纹理加载更改取自:How to apply texture on an object loaded by OBJLoader? .