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

Question

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

Answer 1

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.