As I delve into learning three.js, I find it very intriguing, but have encountered a problem that stumps me.
My current challenge involves loading an OBJ file that I previously created in Blender. In attempting to achieve this, I've been using THREE.OBJLoader. After copying the code from , I'm encountering the error message "THREE.OBJLoader is not a constructor" at line 32.
Despite this issue, everything else seems to be functioning properly: setting up a scene, applying materials, adding shapes like cubes, etc.
To simplify matters, here's the snippet of 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);
//Adding a light source 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 );
//Loading the obj file
loadOBJ();
}
var loadOBJ = function(){
//Manager used in ThreeJs to track loader progress
var manager = new THREE.LoadingManager();
//Obj Loader from Three.js
var loader = new THREE.OBJLoader( manager );
//Initiate loading of the obj file with addBananaInScene as callback upon completion
loader.load( 'http://mamboleoo.be/learnThree/demos/banana.obj', addBananaInScene);
};
var addBananaInScene = function(object){
banana = object;
//Adjusting position of the banana in the scene
banana.rotation.x = Math.PI/2;
banana.position.y = -200;
banana.position.z = 50;
//Iterating through all children of the loaded object and checking for Mesh instances
object.traverse( function ( child ) {
//Verifying if child is an instance of Mesh constructor
if(child instanceof THREE.Mesh){
child.material.color = new THREE.Color(0X00FF00);
//For obj files missing vertex normals, ThreeJs will compute them
child.geometry.computeVertexNormals();
}
});
//Adding the 3D object to the scene
scene.add(banana);
render();
};
var render = function () {
requestAnimationFrame(render);
//Rotating the banana
banana.rotation.z += .01;
renderer.render(scene, camera);
};
init();
I am hopeful that someone can provide insight into what might be causing this issue.
Warm regards, Christian