Three.js-> FileLoader(scope.manager)不是构造函数 [英] Three.js -> FileLoader(scope.manager) not constructor
问题描述
这似乎是重复的问题，因为它与这一个很相似或其他很多内容，但是我所见过的帖子都没有真正帮助我弄清楚问题出在哪里(当然是我;)...)，因此我敢在这里发布它，因为它使我得以前进真的很疯狂.
好吧，我正在使用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.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，但是得到了相同的结果./p>
谢谢您的任何建议.
最佳 k
好！感谢@ 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的三对象加载程序(在原始问题中提到)结合使用上述更正式的三个软件包
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
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
这篇关于Three.js-> FileLoader(scope.manager)不是构造函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
