javascript - THREE.js 加载带有 png 纹理的 obj + mtl

Question

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

TypeError: manager.getHandler 不是函数

这是我的 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< 等构建工具，可以轻松避免此类错误.