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

类型错误：manager.getHandler 不是函数

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

顺便说一句：通过使用three.js的npm包和基于节点的工作流以及诸如rollup类的构建工具，可以轻松避免此类错误。