【发布时间】:2018-04-09 21:40:27
【问题描述】:
我是 THREE 的新手,我正在尝试在我的框架中包含一个带有 mtl 的 obj 模型 - 我通过键入以下内容安装了三个 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 安装了三个 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 is not a constructor',我不太明白当三个 obj-loader 没有发生同样的情况时。 (我也尝试安装 objmtllloader,这会导致同样的错误) - 非常感谢任何帮助:)
编辑: 正如在 cmets 中提到的,似乎三 mtl-loader 不像在三-obj-loader 中那样将 THREE 作为输入。我想也许你可以改变它(我不知道我是否做得正确),我尝试过如下所示: https://www.dropbox.com/s/gbefq8x7roqwhww/index.js?dl=0
现在没有错误,但对象根本不显示。
【问题讨论】:
-
查看three-mtl-loader的来源,它似乎与
three-obj-loader不同,它只导出一个名为MTLLoader的函数,并且该函数不接受THREE作为一个论点。
标签: three.js