navigationend - router events subscribe angular 4

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

Question

Esto podría parecer una pregunta duplicada, ya que es muy similar a esta u otras, pero ninguna de las publicaciones que he visto realmente me ayudó a descubrir dónde está el problema (seguro, soy yo;) ...), por lo tanto, me atrevo a publicarlo aquí, ya que me vuelve realmente loco.

Bueno, estoy trabajando en un proyecto en Angular2 generado con Angular CLI (sin backend ni tráfico, solo HTML + CSS + JS en este momento ... actualizado y actualizado). He importado Three.js y three-obj-loader a través de npm y lo he declarado en mi componente de esta manera:

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

Puedo dibujar cualquier forma, usar luces y sombras, pero no puedo cargar malla desde el archivo .obj externo. He intentado muchas variaciones con el siguiente aspecto:

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

No puedo decir por qué, pero cuando intento cargar obj desde el archivo, recibo un error de consola:

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

y el lienzo está vacío. El error hace referencia a la línea 49 del módulo "tres-obj-loader" que instalé desde aquí . La parte de ese código de terceros mencionado es:

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

No estoy seguro de si podría estar relacionado, pero no instalé ni establecí ningún tipo especial para estos módulos, utilizando solo los archivos fuente JS. Además, no he instalado ningún cargador de archivos.

NOTA: He tratado de implementar OBJLoader2 desde aquí pero obtuve el mismo resultado.

Gracias por cualquier consejo.

Mejor k

Answer 1

¡DE ACUERDO! Gracias a @ TheJimO1 y su comentario, pude resolver el problema. Saqué un paquete diferente de NPM por JordanDelcros que sirve diferentes archivos que el paquete de MrDoob que estaba usando previamente ... luego lo importé en mi componente de esta manera:

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

OBJloader carga desde un archivo externo sin ningún problema ahora.

ACTUALIZACIÓN: Una vez más, gracias a @ TheJimO1, pude hacer que esto funcione de una manera diferente con este paquete más oficial compatible con la última versión de Three.js y trabajando con three-obj-loader. Acabo de importar es el siguiente:

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

Bueno, eso significa que hay al menos dos soluciones de trabajo diferentes:

[A] utiliza el paquete npm único mencionado anteriormente por JordanDelcros que admite r77 con todos los complementos incluidos;

[B] utilice más tres paquetes oficiales mencionados anteriormente en combinación con paquetes de tres obj-loader (mencionados en la pregunta original) que soportan r85