选项1：NPM

Question

我之前在这里问过这个问题：Uncaught TypeError: THREE.MTLLoader is not a constructor

我通过更改三mtl-loader文件让它工作。但是当我稍后将我的工作上传到github时，我必须在不更改这些文件的情况下创建解决方案。

因此我尝试使用经典示例中使用的加载器加载obj和mtl文件：https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_obj_mtl.html

但我仍然收到错误'Uncaught TypeError：THREE.MTLLoader不是构造函数'

我对如何加载这些加载器有点不确定，但是现在我的代码看起来像这样：

import * as THREE from 'three'
import {OBJLoader} from 'three'
import {MTLLoader} from 'three'


var mtlLoader = new THREE.MTLLoader();
mtlLoader.load("http://blabla.obj.mtl", function(materials) {
   materials.preload();
   var objLoader = new THREE.OBJLoader();
   objLoader.setMaterials(materials);
   objLoader.load("http://blabla.obj", function(object) {

       object.scale.x = scale;
       object.scale.y = scale;
       object.scale.z = scale;

       scene.add(object)

  });
});

我插入的src文件夹中的three.js文件中的位置：

export { OBJLoader } from './loaders/OBJLoader.js'
export { MTLLoader} from './loaders/MTLLoader.js'

修改

我使用NPM安装，错误消失。不幸的是，其他问题也出现了 - 但我在另一个问题上提出了这些问题：three-mtl-loader error: THREE.MeshPhongMaterial: .shading has been removed -> object not visible

Answer 1

Three.js文档具有误导性。即使是MTLLoader is in the main documentation，它实际上也不是Three.js核心库的一部分。它包含在Three.js的examples/文件夹中。

如果您使用的是ES6模块语法，则有两种选择。

选项1：NPM

通常人们会将此类内容发布到NPM，因为Threejs的创建者不使用现代JS开发实践。在这种情况下，有一个three-mtl-loader npm package包。

npm install --save three-mtl-loader

然后

import MTLLoader from 'three-mtl-loader';

选项2：从三个来源复制MTLLoader。

您可以将MTLLoader.js文件复制到项目中，但如果您使用的是现代ES6模块，则将第三方库复制到本地项目中并不是一种好习惯。

未捕获的TypeError：THREE.MTLLoader不是构造函数2.0

1 个答案:

选项1：NPM

选项2：从三个来源复制MTLLoader。