3

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

snowy500
  • 77
  • 1
  • 2
  • 6

2 Answers2

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 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>
diogo
  • 3,769
  • 1
  • 24
  • 30
  • Passing `LoadingManager` as a pararmeter to `ObjLoader` is not necessary. – prisoner849 Nov 13 '16 at 15:56
  • Its working, but im still getting error - OBJLoader.js:51 Uncaught TypeError: onLoad is not a function(…) – snowy500 Nov 13 '16 at 20:06
  • I am using the same include as you, maboleoo one – snowy500 Nov 13 '16 at 20:09
  • Also how do I scale my object once loaded? Im trying: myObject.scale.set(0.1, 0.1, 0.1); But the object is the same size? – snowy500 Nov 13 '16 at 20:14
  • I tried putting the object into a new Mesh, scaling that, then adding it - but that also doesn't work – snowy500 Nov 13 '16 at 20:16
  • dear god these comments are a mess ANYWAY, TLDR USE THIS: var loader = new THREE.OBJLoader(); loader.load( "res/rose/ModelsAndTextures/rose.obj", function ( object ) { object.scale.set(0.1, 0.1, 0.1); scene.add( object ); } ); – snowy500 Nov 13 '16 at 20:41
  • Could you create a jsfiddle with your current code and update your question with the new insights? It's be a better idea if you create a new question... :) – diogo Nov 13 '16 at 22:17
0

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.

Vibber
  • 127
  • 1
  • 7