三.js objloader + 纹理

Question

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

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

我已经看到使用 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 上看到

编辑：添加网格而不是 obj 时出现的错误是

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

纹理加载更改取自：如何在 OBJLoader 加载的对象上应用纹理？.