CODEWITHSUNDEEP
javascriptthree.js
Christian Heisch
Christian Heisch

Reputation: 245

THREE.js: Errormessage "THREE.OBJLoader is not a constructor"

I am just learning the use of three.js. It seems very okay, but now I have a problem, which I can't solve.

I want to load an OBJ-file, which I created in blender before. To do that, I am trying to use the THREE.OBJloader. I copied the code from http://mamboleoo.be/learnThree/, but I get the errormessage "THREE.OBJLoader is not a constructor" in line 32.

Everything else works fine: Adding a scene, adding a material, adding a cube, etc.

To make it easy, this is the code:

var renderer, scene, camera, banana;
var ww = window.innerWidth,
wh = window.innerHeight;

function init(){

renderer = new THREE.WebGLRenderer({canvas : document.getElementById('scene')});
renderer.setSize(ww,wh);

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(50,ww/wh, 0.1, 10000 );
camera.position.set(0,0,500);
scene.add(camera);

//Add a light in the scene
directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
directionalLight.position.set( 0, 0, 350 );
directionalLight.lookAt(new THREE.Vector3(0,0,0));
scene.add( directionalLight );

//Load the obj file
loadOBJ();
}

var loadOBJ = function(){

//Manager from ThreeJs to track a loader and its status
var manager = new THREE.LoadingManager();
//Loader for Obj from Three.js
var loader = new THREE.OBJLoader( manager );
//Launch loading of the obj file, addBananaInScene is the callback when it's ready 
loader.load( 'http://mamboleoo.be/learnThree/demos/banana.obj', addBananaInScene);

};

var addBananaInScene = function(object){
banana = object;
//Move the banana in the scene
banana.rotation.x = Math.PI/2;
banana.position.y = -200;
banana.position.z = 50;
//Go through all children of the loaded object and search for a Mesh
object.traverse( function ( child ) {
    //This allow us to check if the children is an instance of the Mesh constructor
    if(child instanceof THREE.Mesh){
        child.material.color = new THREE.Color(0X00FF00);
        //Sometimes there are some vertex normals missing in the .obj files, ThreeJs will compute them
        child.geometry.computeVertexNormals();
    }
});
//Add the 3D object in the scene
scene.add(banana);
render();
};


var render = function () {
requestAnimationFrame(render);

//Turn the banana
banana.rotation.z += .01;

renderer.render(scene, camera);
};

init();

I hope, someone has an idea, where this might come from.

Regards, Christian

Upvotes: 19

Views: 23836

Answers (4)

Hadi Ostad
Hadi Ostad

Reputation: 1

you can use ObjectLoader.js

var objLoader = new THREE.ObjectLoader();

note: OBJLoader not working

Upvotes: -2

Mario Kopljar
Mario Kopljar

Reputation: 1

Great answer. One thought though ... In that .js file, there is NO reference to the version, and these change like on a roller-coaster with functions being deprecated on a daily basis (.e.g. projector was ok till i think v71 or so ?) There are many issues with backward compatibility of three.js project and a lack of an organized repository for .js files

Upvotes: -1

Tejas Katakdhond
Tejas Katakdhond

Reputation: 313

import OBJLoader - import { OBJLoader } from './jsm/loaders/OBJLoader.js';

enter image description here

Upvotes: -2

Patel
Patel

Reputation: 1478

When you are copying from Codepen examples, always go to pen and check under the 'Settings' to see any other files which are used in the project.

In your case, the author is using OBJLoader.js and that's where OBJLoader constructor is coming from and you don't have a reference to that. Hence, you're getting the error. Include the reference and it should be working.

Upvotes: 16

Related Questions