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