Three.js -> FileLoader(scope.manager) not constructor

问题

This might seems as a duplicated question, since it is very similar to this one or many others, but none of the posts I have seen really helped me to figure out where the problem is ( sure, it's me ;) ...), hence I dare to post it here, since it makes me going really crazy.

Well, I am working on a project in Angular2 generated with Angular CLI (no backend task or any trafficking, just HTML + CSS + JS files at the moment ... all up to date and latest). I have imported Three.js and three-obj-loader through 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 mesh from external .obj file. I have tried many variations 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 cannot tell why, but when I try to load obj from file, I receive console error:

TypeError: undefined is not a constructor (evaluating 'new THREE.FileLoader(scope.manager)')

and the canvas is empty.The error is referencing to line 49 of "three-obj-loader" module which I installed from here . The part of that third-party-code mentioned is:

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 it might be related, but I did not installed or declared any special types for these modules, using just the plain JS source files. Also I have not installed any file loader.

NOTE: I have tried to implement OBJLoader2 from here but got the same result.

Thank you for any advice.

Best k

回答1:

OK! Thanks to @TheJimO1 and his comment I was able to solve the issue. I pulled out a different NPM package by JordanDelcros which serves different files than MrDoob's package I was using previously ... then I imported it into my component like this:

declare var require: any;
const OBJLoader = require('three-js/addons/OBJLoader');
const THREE = require('three-js')([OBJLoader]);

OBJloader loads from external file without any problem now.

UPDATE: Once again, thanks to @TheJimO1, I was able to make this work in a different way with this more official package supporting latest version of Three.js and working with three-obj-loader . I just imported is as follows:

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] use previously mentioned single npm package by JordanDelcros which supports r77 with all addons included;

[B] use more official three package mentioned above in combination with three-obj-loader (mentioned in original question) packages which support r85

来源：https://stackoverflow.com/questions/43782046/three-js-fileloaderscope-manager-not-constructor

标签

angular

typescript

three.js

.obj

objloader