THREE.js: Errormessage "THREE.OBJLoader is not a constructor"
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.
Related videos on Youtube
Christian Heisch
Updated on September 16, 2022Comments
-
Christian Heisch over 1 year
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
-
Christian Heisch about 8 yearsTRUE. I didn't expect to have to import another script as I haven't seen the note. Now I see it in the doc of treejs.org. Thanks for your help.
-
Homungus almost 4 yearsthis is not an answer to the question - please use comments-function