Three.js & # 8594; FileLoader (scope.manager) not constructor
This may look like a duplicate question as it is very similar to this one or many others, but none of the posts I've seen really helped me figure out where the problem is (of course it's me;) ...), so I dare post it here as it drives me crazy.
Well, I am working on a project in Angular2 generated from the Angular CLI (no backend task or any traffic, just HTML + CSS + JS files for now ... everything is up to date). I imported Three.js and three-obj-loader via npm and declared it in my component like this:
import * as THREE from 'three';
declare var require: any;
const OBJLoader = require('three-obj-loader')(THREE);
I can draw any shape, use lights and shades, but cannot load the mesh from an external .obj file. I've tried many options looking like this:
const manager = new THREE.LoadingManager();
const loader = new THREE.OBJLoader( manager );
loader.load( './working/path/to/file.obj', function ( object ) {
object.position.x = 0;
object.position.y = 0;
object.scale.x = 10;
object.scale.y = 10;
object.scale.z = 10;
const texture = THREE.TextureLoader('./working/path/to/file.jpg');
const material = new THREE.MeshLambertMaterial( { map: texture } );
const mesh = new THREE.Mesh( object, material );
scene.add( mesh );
} );
I can't figure out why, but when I try to load obj from a file, I get a console error:
TypeError: undefined is not a constructor (evaluating 'new THREE.FileLoader(scope.manager)')
and the canvas is empty. The error refers to line 49 of the "three-obj-loader" module I installed here , Part of the third watchdog mentioned:
THREE.OBJLoader.prototype = {
constructor: THREE.OBJLoader,
load: function load(url, onLoad, onProgress, onError) {
var scope = this;
var loader = new THREE.FileLoader(scope.manager);
loader.setPath(this.path);
loader.load(url, function (text) {
onLoad(scope.parse(text));
}, onProgress, onError);
},
Not sure if this might be related, but I did not install or declare any special types for these modules, using only plain JS source files. Also I haven't installed the file downloader.
NOTE. I tried to implement OBJLoader2 from here but got the same result.
Thanks for any advice.
Best to
source to share
OK! Thanks to @ TheJimO1 and his comment, I was able to resolve the issue. I pulled out a different NPM package from JordanDelcros that serves different files than the MrDoob package I used earlier ... then I imported it into my component like:
declare var require: any;
const OBJLoader = require('three-js/addons/OBJLoader');
const THREE = require('three-js')([OBJLoader]);
Loading OBJloader from external file no problem.
UPDATE: Thanks again @ TheJimO1, I was able to make this work differently with this more official package supporting the latest Three. js and works with a three-user loader. I just imported the following:
declare var require: any;
const THREE = require('three');
const OBJLoader = require('three-obj-loader')(THREE);
Well, that means there are at least two different working solutions:
[A] uses the previously mentioned one npm package from JordanDelcros which supports r77 with all the add-ons included;
[B] use the more official three packages mentioned above in combination with packages with three loader objects (mentioned in the original question) that support r85
source to share