3

这似乎是一个重复的问题，因为它与这个或许多其他问题非常相似，但我所看到的帖子都没有真正帮助我找出问题所在（当然，是我;）...），因此我敢在这里发布它，因为它让我非常疯狂。

好吧，我正在开发一个使用 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)')

并且画布是空的。错误引用了我从这里安装的“three-obj-loader”模块的第 49 行。提到的第三方代码部分是：

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但得到了相同的结果。

谢谢你的任何建议。

最佳k

4

1 回答 1

1

好的！感谢@TheJimO1 和他的评论，我能够解决这个问题。我从 JordanDelcros 提取了一个不同的NPM 包，它提供的文件与我之前使用的 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] 使用之前提到的 JordanDelcros 的单个 npm 包，它支持 r77 并包含所有插件；

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

于 2017-05-04T19:11:35.223 回答