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

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

• javascript
• three.js

Share Improve this question Follow asked Nov 13, 2016 at 13:41 snowy500snowy500 7711 gold badge33 silver badges66 bronze badges 3

• what revision of Three.js? – prisoner849 Commented Nov 13, 2016 at 13:45
• I just downloaded three.min.js from github today, so should be the latest – snowy500 Commented Nov 13, 2016 at 13:56
• i also tried with the main three.js – snowy500 Commented Nov 13, 2016 at 13:56

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 0

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 pute them
        child.geometry.puteVertexNormals();
      }
    });
    
    scene.add(banana);
    render();
  });
};

loadOBJ();

<script src="http://cdnjs.cloudflare./ajax/libs/three.js/r79/three.min.js"></script>
<script src="http://mamboleoo.be/learnThree/demos/OBJLoader.js"></script>

<canvas id="scene"></canvas>

I had this issue and realized I used an old version of the three.js file. I replaced it with the three.js in the build folder of the three.js download where I took the OBJLoader from.