2017-05-04 91 views
3

這可能看起來像一個重複的問題,因爲它與this one或許多其他問題非常相似,但是我看到的文章都沒有真正幫助我找出在哪裏問題是(當然,這是我;)...),因此我敢於在這裏發佈,因爲它讓我變得非常瘋狂。Three.js - > FileLoader(scope.manager)not constructor

那麼,我正在使用Angular CLI生成的Angular2項目(沒有後端任務或任何交易,目前只是HTML + CSS + JS文件......都是最新的和最新的)。我有進口three.js所和三OBJ裝載機通過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)') 

和畫布是empty.The錯誤引用了我安裝的「three-obj-loader」模塊的第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,但得到了相同的結果。

謝謝你的任何建議。

最佳 ķ

+0

OK的包,所以我比較three.js所源文件,您可以通過獲取在Github上使用最新的zip包(dev)的NPM。在我看來,NPM服務於R77,但開發者是R85。有顯着差異。要命名一個引人注目的是,NPM包丟失參考FileLoader並且對於FileLoader這聽起來合理沒有源文件...,因爲我收到錯誤......嗯,我看不出有深入three.js所的布,因此我很難在我使用的模塊中重寫該源代碼或使開發包與我的項目一起工作(我的不好,我應該知道......)。 – Kristievnee

+0

只需要注意一下,我只是從'npm'拉出'three-js'並得到r79。它還是老樣子沒有包含'THREE.FileLoader'了,所以必須有版本'三js',並在'npm'託管'三OBJ-loader'版本之間的失配。 – TheJim01

+0

謝謝你的注意。挺有趣的。你使用了什麼命令?當我做簡單的安裝沒有任何標誌,我收到R77(v0.77.1),當我用@latest或@^0.79.0嘗試它,我收到:「NPM ERR notarget有效安裝目標: NPM ERR notarget 0.0! 1,0.0.2,0.1.0,0.72.0,0.73.0,0.73.2,0.77.0,0.77.1" ... – Kristievnee

回答

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負載沒有任何問題了。

UPDATE: 再次,感謝@ TheJimO1,我是能夠使這項工作以不同的方式與這more official package支持最新版本的three.js所,並與三OBJ-裝載機工作。我剛導入如下:

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

那麼這意味着有至少兩個不同的工作的解決方案:

[A]使用先前由JordanDelcros提到單NPM包,它支持所有的附加元件R77包括在內;

[B]使用上述提到的組合與三OBJ裝載機更多的官方三包(在原來的問題提到的)支持R85

+0

順便說一句,這裏的包你其實想:https://www.npmjs.com/package/three你提到這裏的一個相同的一個,我建議,但贊成的官方消息已經被淘汰。 – TheJim01

+0

嘿,那是超級!超級混淆,但也超級聰明...這個你已經發布支持所有最近的功能,但需要外部OBJloader ...與三obj加載器很好...感謝! – Kristievnee

相關問題