THREE.FileLoader is not a constructor(…)

Question

I'm trying to load a model into my scene.

I've included these files at the top 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 get error: OBJLoader.js:46 Uncaught TypeError: THREE.FileLoader is not a constructor(…)

I looked in the OBJLoader.js file and to find THREE.FileLoader - this is the line the error is on:

           var loader = new THREE.FileLoader( scope.manager );

Other peoples examples of this work fine

Solution

Check out if you're using the right OBJLoader.js.

Take a look at an example that shows how to use this object properly:

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's 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>