THREE.js 使用 png 纹理加载 obj + mtl

Question

我正在尝试将参考 png 纹理的 mtl 文件加载到我的 obj 模型，但出现以下错误：

TypeError: manager.getHandler is not a function

这是我的 three.js 代码：

var loadOBJ = function(){
    var mtlLoader = new THREE.MTLLoader();
    mtlLoader.load( "static/pictures/3D/untitled2.mtl", function( materials ) {
            materials.preload();
            console.log(materials);

            var loader = new THREE.OBJLoader(  );
            loader.load( "static/pictures/3D/jaw.obj", addModelInScene);});
};

var addModelInScene = function(object){
    model = object;
    model.rotation.y = 1.55;
    scene.add(model);
    render();
};

这是 .mtl 文件

newmtl Teeth_UDIM
Ns 255.999998
Ka 1.000000 1.000000 1.000000
Kd 0.480000 0.424000 0.480000
Ks 0.040000 0.040000 0.040000
Ni 1.000000
d 1.000000
illum 2
map_Kd mrm.png

mrm.png 文件与 .mtl 和 .obj 文件位于同一目录中。当我从 .mtl (map_Kd mrm.png) 中删除最后一行时，错误没有显示，但纹理也没有显示。我做错了什么吗？

Answer 1

TypeError: manager.getHandler is not a function

此运行时错误表明 MTLLoader 的版本比您的 three.js 版本新。您始终必须确保核心文件以及所有示例文件（如 OBJLoader 或 MTLLoader）来自同一版本。使用当前版本或至少 R109 应该可以解决问题。

顺便说一句：通过使用 three.js 的 npm 包和使用 rollup.

等构建工具的基于节点的工作流，可以轻松避免此类错误

THREE.js 使用 png 纹理加载 obj + mtl

THREE.js loading obj + mtl with png textures

javascript

.obj

three.js