CODEWITHSUNDEEP
three.js
some_name
some_name

Reputation: 399

Uncaught TypeError: THREE.MTLLoader is not a constructor

I am pretty new to THREE, and I am trying to include a obj model witl mtl in my framework - I installed three-obj-loader by typing the following: 

npm install --save three-obj-loader

I can then load a model, like this: 

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 );

} );

But I wish to include the objects mtl-file. I install three-mtl-loader by again using npm install, and include the following to the code: 

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

And I then tried using code similar to this: 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);
  });
});

But the following error is then thrown : 'Uncaught TypeError: THREE.MTLLoader is not a constructor', which I don't quite understand when the same doesn't happen with the three-obj-loader. (I also tried installing the objmtllloader, which results in the same error) - Any help is very appreciated :)

Edit: As mentioned in the comments it seems that the three-mtl-loader doesn't take THREE as a input as in the three-obj-loader. I figured that maybe you could just change that (I don't know if I did it properly), which I tried as seen here: https://www.dropbox.com/s/gbefq8x7roqwhww/index.js?dl=0

Now there are no errors, but the object simply doesn't show at all.

Upvotes: 0

Views: 2237

Answers (1)

some_name
some_name

Reputation: 399

Actually changing the mtl-loader to: https://www.dropbox.com/s/gbefq8x7roqwhww/index.js?dl=0 , did fix the problem :D

Upvotes: 1

Related Questions