Three.js -> FileLoader(scope.manager) не конструктор

Question

Это может показаться дублирующим вопросом, так как он очень похож на этот или на многие другие, но ни один из постов, которые я видел, действительно не помог мне понять, где проблема (конечно, это я;) ...), поэтому я осмелюсь опубликовать это здесь, так как это сводит меня с ума.

Что ж, я работаю над проектом в Angular2, сгенерированным с помощью Angular CLI (без серверной задачи или какого-либо трафика, только файлы HTML + CSS + JS на данный момент... все в актуальном состоянии и в последнее время). Я импортировал Three.js и three-obj-loader через npm и объявил это в моем компоненте так:

import * as THREE from 'three';
declare var require: any;
const OBJLoader = require('three-obj-loader')(THREE);

Я могу нарисовать любую фигуру, использовать источники света и тени, но не могу загрузить сетку из внешнего файла.obj. Я пробовал много вариантов, выглядящих так:

  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 );
   } );

Я не могу сказать почему, но когда я пытаюсь загрузить obj из файла, я получаю консольную ошибку:

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

и холст пуст. Ошибка связана со строкой 49 модуля "three-obj-loader", который я установил отсюда. Часть упомянутого стороннего кода:

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);
},

Не уверен, что это может быть связано, но я не установил и не объявил никаких специальных типов для этих модулей, используя только простые исходные файлы JS. Также я не установил никакой загрузчик файлов.

ПРИМЕЧАНИЕ: я попытался реализовать OBJLoader2 отсюда, но получил тот же результат.

Спасибо за любой совет.

Бест к

Answer 1

ХОРОШО! Благодаря @TheJimO1 и его комментарию я смог решить проблему. Я вытащил другой пакет NPM от JordanDelcros, который обслуживает файлы, отличные от пакета MrDoob, который я использовал ранее... затем я импортировал его в свой компонент следующим образом:

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

OBJloader загружается из внешнего файла без проблем.

ОБНОВЛЕНИЕ: еще раз, благодаря @TheJimO1, я смог сделать эту работу по-другому с этим более официальным пакетом, поддерживающим последнюю версию Three.js и работающим с Three-obj-loader . Я только что импортировал это следующим образом:

declare var require: any;
const THREE = require('three');
const OBJLoader = require('three-obj-loader')(THREE);

Это означает, что есть как минимум два разных рабочих решения:

[A] использовать ранее упомянутый одиночный пакет npm от JordanDelcros, который поддерживает r77 со всеми включенными дополнениями;

[B] использовать более официальные три пакета, упомянутые выше, в сочетании с пакетами three-obj-loader (упомянутыми в оригинальном вопросе), которые поддерживают r85