THREE.FileLoader cannot be used as a constructor(…)

Question

THREE.FileLoader cannot be used as a constructor(…)

Currently, I am attempting to import a model into my scene.

These are the files that I have included at the beginning of my project:

     <script src="js/build/three.min.js"></script>
     <script src="js/loaders/OBJLoader.js"></script>

Below is the code I am using:

    var loader = new THREE.OBJLoader();
    loader.load( "res/rose/ModelsAndTextures/rose.obj", function ( object ) {
      scene.add( object );
    } );

However, an error occurs: OBJLoader.js:46 Uncaught TypeError: THREE.FileLoader is not a constructor(…)

I examined the OBJLoader.js file and identified where the error is occurring:

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

Strangely enough, similar examples from other sources work perfectly fine for them

javascript three.js

Answer 1

Answer №1

Make sure you are utilizing the correct OBJLoader.js.

Here is an example demonstrating the proper usage of this object:

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>

Answer 2

Make sure you are utilizing the correct OBJLoader.js.

Here is an example demonstrating the proper usage of this object:

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>

Answer 3

Answer №2

After encountering the problem, I discovered that I was using an outdated version of the three.js file. To resolve this issue, I replaced it with the three.js file from the build folder of the downloaded three.js where I had obtained the OBJLoader.

Answer 4

After encountering the problem, I discovered that I was using an outdated version of the three.js file. To resolve this issue, I replaced it with the three.js file from the build folder of the downloaded three.js where I had obtained the OBJLoader.

THREE.FileLoader cannot be used as a constructor(…)

Answer №1

Answer №2

Similar questions

I'm curious, in TypeScript, how can I access a class variable from within a method

How to incorporate multiple anchor tags and hashtags into a Vue.js <router-link> or @click function

There is a random section that keeps crashing on the website

Tips for sending a parameter within a JavaScript confirm method?

div added on the fly not showing up

The Mysteries of Key Codes in JavaScript

Discovering a locator based on the initial portion of its value

What are the best practices for incorporating debounce functionality in redux-form?

Interactive image sliders in a Netflix-inspired style with live previews on hover, fully compatible with Bootstrap framework

GWT error: empty stack

Are there any other benefits to utilizing the Decorator pattern besides enhancing dynamic behavior?

iOS device encounters failure with Ajax CORS request and redirect

"Despite the null date in Node.js, the validation for expiration dates less than Date.now() is still being enforced

The Mongoose model is having issues being imported into a different Component

The function is producing 'undefined' output despite having the correct result within its body

A guide on retrieving the values of all child elements within an HTML element using Puppeteer

Lazy loading images without the need to manually adjust the image structure

Navigating within an ng-if or ng-show in AngularJS

Locating Elements in Protractor: Exploring Nested Elements within an Element that is Also a Parent Element Elsewhere on the Page

Using specific delimiters in Vue.js components when integrating with Django and Vue-loader