如何在three.js中将MTL纹理添加到OBJ模型

Question

你好，我正在尝试在three.js中将MTL文件添加到我的OBJ模型中。我已经加载了OBJ模型并准备解决这个问题。但是，当我添加了使用MTLLoader加载MTL文件的代码后，它没有通过mtlLoader.load(url, ....)（即在添加了这段代码之后，只有场景被渲染而里面什么都没有）。我正在使用警报来跟踪代码的进度，并且在此语句之前收到了警报，但之后没有收到。我找到的所有解决方案都包括使用OBJMTLLoader，但它不再是当前版本（r74）的three.js的一部分。

- RPBruiser

---

不确定为什么OBJMTLLoader从r74示例中被移除了，但是你可以看一下它如何使用MTLLoader来加载纹理，只需在这里查看源代码。或者，如果OBJMTLLoader在r74中仍然有效，甚至可以继续使用OBJMTLLoader类。 - 2pha

这里是删除OBJMTLLoader的提交记录：https://github.com/mrdoob/three.js/commit/ad41d295eeb6cb77cb56e931fea881fe71fcb6ab#diff-12ac5f8fb38da21d5a5eaa89ee22f155，以及相关问题：https://github.com/mrdoob/three.js/pull/7524。 - 2pha

Answer 1

这段代码来自于官方的加载obj + mtl示例：

var mtlLoader = new THREE.MTLLoader();
mtlLoader.setBaseUrl( 'obj/male02/' );
mtlLoader.setPath( 'obj/male02/' );
var url = "male02_dds.mtl";
mtlLoader.load( url, function( materials ) {

    materials.preload();

    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials( materials );
    objLoader.setPath( 'obj/male02/' );
    objLoader.load( 'male02.obj', function ( object ) {

        object.position.y = - 95;
        scene.add( object );

    }, onProgress, onError );

});

http://threejs.org/examples/#webgl_loader_obj_mtl

现在你可以通过以下代码分配OBJ的材质：

objLoader.setMaterials( materials );

如果你想操作材质，mtlLoader 在回调函数中提供给你的是 THREE.MTLLoader.MaterialCreator 实例。你可以通过例如 materials.getAsArray() 来获取材质。查看源代码以获取所有可能的函数：https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/MTLLoader.js#L138-L417

- Falk Thiele

---

我目前正在尝试实现这段代码。在发布这篇文章之前，我已经尝试过了，但我的问题仍然存在。我放置了一个警报语句来查看是否正在创建MTLLoader（是的），但是我在mtlLoader.load（url，function（materials）{}后面直接放置了一个警报语句，但它从未到达此语句。 - RPBruiser

需要设置基本Url和路径，然后仅使用模型名称调用加载器。也许您的mtl文件存在问题，您可以尝试使用代码加载three.js附带的模型+mtl文件，看看会发生什么。 - Falk Thiele

我的MTL没有任何问题，我已经在多个3D模型查看器中打开它，并且在所有的查看器中都能够正常显示。 - RPBruiser

所以我收到了一个错误，说loader.setPath不是一个函数？ - RPBruiser

很想看到每行代码的解释。 - user1804599