开发者问题收集

未捕获的类型错误:THREE.MTLLoader 不是构造函数

2017-10-28
2187

我对 THREE 还很陌生,我正尝试在我的框架中包含一个带有 mtl 的 obj 模型 - 我通过输入以下内容安装了 three-obj-loader:

npm install --save three-obj-loader

然后我可以加载一个模型,如下所示:

import * as THREE from 'three'
import * as objlibrary from 'three-obj-loader'
let OBJLoader = objlibrary(THREE)

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(75, window.innerWidth / 
window.innerHeight, 0.1, 50000);

let renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xB1B1B1, 0);
renderer.domElement.id = 'view3d'

document.body.appendChild(renderer.domElement);

//load obj-model
var loader = new THREE.OBJLoader();
loader.load("http://blabla/object.obj" , function ( object ) {
var material = new THREE.MeshLambertMaterial( { color: 0x006400 } );
object.traverse( function ( child ) {

    if ( child instanceof THREE.Mesh ) {

        child.material = material;

    }

} ); 
object.scale.x = 0.01;
object.scale.y = 0.01;
object.scale.z = 0.01;
scene.add( object );

} );

但我希望包含对象 mtl 文件。我再次使用 npm install 安装 three-mtl-loader,并将以下内容包含在代码中:

import * as mtllibrary from 'three-mtl-loader'
let MTLLoader = mtllibrary(THREE)

然后我尝试使用类似这样的代码: https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_obj_mtl.html :

var mtlLoader = new THREE.MTLLoader();
mtlLoader.load("http://blabla/object.obj.mtl", function(materials) {
  materials.preload();
  var objLoader = new THREE.OBJLoader();
  objLoader.setMaterials(materials);
  objLoader.load("http://blabla/object.obj", function(object) {
    object.scale.x = 0.01;
    object.scale.y = 0.01;
    object.scale.z = 0.01;
    scene.add(object);
  });
});

但是随后引发了以下错误:'Uncaught TypeError:THREE.MTLLoader 不是构造函数',我不太明白为什么 three-obj-loader 不会发生同样的情况。 (我也尝试安装 objmtllloader,但结果还是一样) - 非常感谢任何帮助 :)

编辑 : 正如评论中提到的,three-mtl-loader 似乎不像 three-obj-loader 那样将 THREE 作为输入。我想也许你可以改变它(我不知道我是否做对了),我尝试了,如下所示: https://www.dropbox.com/s/gbefq8x7roqwhww/index.js?dl=0

现在没有错误,但对象根本没有显示。

1个回答

实际上将 mtl-loader 更改为: https://www.dropbox.com/s/gbefq8x7roqwhww/index.js?dl=0 ,确实解决了问题:D

some_name
2017-10-28