2017-05-04 10 views
3

をコンストラクタではない、それはthis oneや他の多くと非常によく似ているので、これかもしれないが、重複した質問と思えるが、私は本当に見ている記事はどれもどこ把握するために私を助けていません問題は(確かに、それは私です;)...)、それゆえ、私は本当に狂ってしまうので、ここに投稿することを敢えてします。Three.js - > FileLoader(scope.manager)

Angular CLIで生成されたAngular2のプロジェクト(バックエンドタスクやトラフィッキング、現時点ではHTML + CSS + JSファイル...すべて最新のものと最新のもの)で作業しています。私はNPMを通じてThree.jsと3-OBJ-ローダーをインポートし、このように私のコンポーネントでそれを宣言している:私は、任意の形状、使用ライトと影を描くことができますが、外部の.objファイルからメッシュをロードすることはできません

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

。私はこのように見ている多くのバリエーションを試してみました:

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ですエラーはfrom hereをインストールした "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のソースファイルを使用して、これらのモジュールのための特別な型を宣言しませんでした: 言及したサードパーティ・コードの一部です。また、私はファイルローダーをインストールしていません。

注:私はhereからOBJLoader2を実装しようとしましたが、同じ結果を持っています。

ありがとうございました。

ベスト K

+0

OKサポートパッケージを(元の質問で述べた)ので、私はあなたが経由で取得することができますThree.jsのソースファイルを比較Githubで現在のzipパッケージ(dev)を持つNPM。 NPMはr77を提供しているようですが、開発者はr85です。大きな違いがあります。1つの印象を与えるために、NPMパッケージにはFileLoaderへの参照がなく、FileLoaderのソースファイルはありません。私が受け取ったエラーを考えれば、妥当と思われます...よく、私はThree.jsのファブリックには深く関わっていませんしたがって、私が使用するモジュールでそのソースを書き直したり、プロジェクトと一緒に開発パッケージを作ったりするのは少し難しいです(私は悪いです、私はそれを学ぶべきです...)。 – Kristievnee

+0

ちょうどメモ、私は 'npmから' three-js 'を引っ張り、r79を得ました。 stilには 'THREE.FileLoader'が含まれていないので、' three-js'のバージョンと 'npm'にホストされている' three-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と彼のコメントのおかげで、私はこの問題を解決することができました。外部ファイルから

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

OBJloader負荷を問題なく今:私は、私はこのような私のコンポーネントにインポートした...私が以前使っていたMr​​Doobのパッケージとは異なるファイルを提供しています異なるNPM package by JordanDelcrosを引き抜きます。

UPDATE: はもう一度、@ TheJimO1のおかげで、私はこのmore official packageはThree.jsの最新バージョンをサポートし、3-OBJ-ローダーで作業して別の方法でこの作品を作ることができました。私は、インポート、次のとおりです。

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

まあ、少なくとも二つの異なる作業ソリューションがされていることを意味し:

[A]は以前のすべてのアドオンが含まれてR77をサポートしていますJordanDelcrosすることにより、単一のNPMパッケージを言及し使用します。

[B] 3-OBJ-ローダーとの組み合わせで上記より公式の3つのパッケージを使用R85

+0

ところで、実際に欲しい:https://www.npmjs.com/package/threeここで言及したものは、私が提案したものと同じですが、公式の情報源に賛成して非難されています。 – TheJim01

+0

ねえ、それは超です!超混乱しているだけでなく、超賢い...これは最近の機能をすべてサポートしていますが、外部のOBJローダーが必要です... 3つのobj-loaderでうまくいきます...ありがとう!!! – Kristievnee