THREE.FileLoader is not a constructor (...)
I am trying to load a model into my scene.
I have included these files at the start of my project:
<script src="js/build/three.min.js"></script>
<script src="js/loaders/OBJLoader.js"></script>
This is my code
var loader = new THREE.OBJLoader();
loader.load( "res/rose/ModelsAndTextures/rose.obj", function ( object ) {
scene.add( object );
} );
But I am getting error: OBJLoader.js: 46 Uncaught TypeError: THREE.FileLoader is not a constructor (...)
I looked in the OBJLoader.js file and found THREE.FileLoader - this is the line the error is in:
var loader = new THREE.FileLoader( scope.manager );
Other examples of this work fine
+1
source to share
2 answers
Check if you are using the right OBJLoader.js .
Take a look at an example showing how to use this object correctly:
var scene = new THREE.Scene();
var renderer, camera, banana;
var ww = window.innerWidth,
wh = window.innerHeight;
renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('scene')
});
renderer.setSize(ww, wh);
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);
var render = function() {
requestAnimationFrame(render);
banana.rotation.z += .01;
renderer.render(scene, camera);
};
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 ready
loader.load('http://mamboleoo.be/learnThree/demos/banana.obj', 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();
}
});
scene.add(banana);
render();
});
};
loadOBJ();
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>
<script src="http://mamboleoo.be/learnThree/demos/OBJLoader.js"></script>
<canvas id="scene"></canvas>
0
source to share