Three.js: JSM / GLTFLoader:jsmを使用したWebpackエラー

作成日 2019年03月09日  ·  3コメント  ·  ソース: mrdoob/three.js

問題の説明

webpackをバンドラーとして使用するAngularプロジェクトでthree.jsを使用しています。
GLTFファイルをロードしようとすると、ReferenceErrorがスローされます。

ERROR Error: Uncaught (in promise): ReferenceError: THREE is not defined ReferenceError: THREE is not defined at GLTFLoader.js:2715

このコード行を参照すると:

https://github.com/mrdoob/three.js/blob/1bb6d19805a30e6edb5650d40ab248a3f9ce918e/examples/jsm/loaders/GLTFLoader.js#L2715

TypeScriptコードでは、ローダーを次のようにインポートします。

import { GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader';

これを修正すると思います。グローバルな_THREE_オブジェクトが定義されていないため、_BufferGeometryUtils_を_three.module.js_にエクスポートするか、コードブロックをjsmバージョンのGLTFLoaderから削除する必要があります。

また、_BufferGeometryUtils_が_modularize_スクリプトの例外であることがわかりました。

https://github.com/mrdoob/three.js/blob/e88edaa2caea2b61c7ccfc00d1a4f8870399642a/utils/modularize.js#L15

Three.jsバージョン
  • []開発
  • [x] r102
  • []..。
ブラウザ
  • [x]それらすべて
  • []クローム
  • [] Firefox
  • [ ] インターネットエクスプローラ
OS
  • [x]それらすべて
  • [ ] ウィンドウズ
  • [ ] マックOS
  • [] Linux
  • [] Android
  • [] iOS
ハードウェア要件(グラフィックカード、VRデバイスなど)
Bug

最も参考になるコメント

devブランチで更新されたGLTFLoaderを試しましたが、リリースを待って正常に動作しています。
修正してくれてありがとう!

緊急の修正が必要な場合は、「three-gltf-loader」npmパッケージを使用してください。

import GLTFLoader from 'three-gltf-loader';

全てのコメント3件

残念ながら、 examples/jsmモジュールは完全には機能していませんが、申し訳ありません。 まだこれに取り組んでいます。

他のユーザーがここで同じ問題を報告しました:

https://discourse.threejs.org/t/importing-three-r102-examples-jsm-gltfloader-into-angular-7-project/6484

#15582をマージすると、この問題は解決するはずですよね?

devブランチで更新されたGLTFLoaderを試しましたが、リリースを待って正常に動作しています。
修正してくれてありがとう!

緊急の修正が必要な場合は、「three-gltf-loader」npmパッケージを使用してください。

import GLTFLoader from 'three-gltf-loader';

このページは役に立ちましたか?
0 / 5 - 0 評価