Question

这似乎是一个重复的问题，因为它与this one或许多其他人非常相似，但我见过的所有帖子都没有帮我弄清楚问题出在哪里（当然，它＆＃39我是;）...），因此我敢在这里张贴，因为它让我真的疯了。

好吧，我正在使用Angular CLI生成Angular2中的一个项目（没有后端任务或任何广告投放管理，目前只有HTML + CSS + JS文件...全部是最新的和最新的）。我已经通过npm导入了Three.js和three-obj-loader，并在我的组件中声明它：

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)')

并且画布为空。错误引用了＆＃34; three-obj-loader＆＃34;的第49行。我安装的模块from here。提到的第三方代码的一部分是：

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源文件为这些模块安装或声明任何特殊类型。我还没有安装任何文件加载器。

注意：我试图从here实现OBJLoader2，但结果相同。

感谢您的任何建议。

最佳

ķ

Answer 1

OK！感谢@ TheJimO1和他的评论，我能够解决这个问题。我提取了一个不同的NPM package by JordanDelcros，它提供的文件不同于我之前使用过的MrDoob包...然后我将它导入我的组件中：

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

OBJloader现在从外部文件加载没有任何问题。

更新：再一次，感谢@ TheJimO1，我能够以不同的方式使用这个more official package支持最新版本的Three.js并使用三个obj-loader来完成这项工作。我刚导入的内容如下：

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

这意味着至少有两种不同的工作解决方案：

[A]使用前面提到的JordanDelcros的单个npm包，它支持包含所有插件的r77;

[B]使用上面提到的更多官方三包和三个obj-loader（在原始问题中提到）包支持r85

Three.js - ＆gt; FileLoader（scope.manager）不是构造函数

1 个答案: