web-dev-qa-db-ja.com

Three.jsローダーをAngular 6プロジェクトにインポートする方法

Three.js（_@types/three/index_）を使用してng6プロジェクトにインポートされた型定義を、同じ「名前空間」に直接接続される一連の関数で拡張したいと思います。 THREE.myFunction()など。 タイプチェックとリンターを抑制するためにTHREEをanyとして宣言したくないので、THREEを拡張するVanilla JS関数をラップして、 TSクラス/関数、および_typings.d.ts_の利用。

ローダーのインポート

まず、THREE.jsローダーをプロジェクトにインポートします。これは通常、THREEを拡張するバニラ関数として定義されています。

BinaryLoader をngサービスにインポートしようとしていますが、正しい方法でインポートする方法がわかりません。

これまでに行ったこと：

  1. _npm install three --save_
  2. _npm install @types/three --save-dev_
  3. _import * as THREE from 'three';_
  4. binaryLoaderを新しいangular.jsonscripts配列に追加します

angular.json

_        "scripts": [
          "./node_modules/three/examples/js/loaders/BinaryLoader.js"
        ]
_

これまでのところ良いですが、今はバイナリローダーを作成する必要があります：

_import * as THREE from 'three';
// import { BinaryLoader } from 'three';
// import 'three/examples/js/loaders/BinaryLoader';

export class ThreeManagerService {
   const loader = new THREE.BinaryLoader();
   ...
_

BinaryLoaderを_@types/three/index_に追加する方法を何とか見つけなければなりません。そのようにして、新しいタイプ_THREE.BinaryLoader_を作成できるようにするために、タイプ定義を拡張するができるはずです。そのようなことをすることは可能ですか？

私が受け取った警告は：

./src/app/shared/three-manager.service.ts 24：25-43の警告「エクスポート 'BinaryLoader'（ 'THREE'としてインポート）が 'three'に見つかりませんでした

サイレンシングタイプの警告とTSトランスパイラー

警告とエラーを回避するための回避策は次のようなものです。

_import * as THREEJS from 'three';
declare const THREE: any;

export class ThreeManagerService {
   const loader = new THREE.BinaryLoader();
_

実際のところ、私はこの回避策を非常に醜い「修正」と見なしています。型システムをできるだけ使いたいです。

編集：IntellisenseとTypeScriptでニースをプレイする例を取得する

ES6モジュールおよび名前空間と互換性のある例の完全な書き直しを待つ間、_/src/node_modules/three-extras/index.ts_でグローバルを公開および拡張するローカルモジュールを定義することができます。

_import * as THREE from 'three';

declare global {
   interface Window {
      THREE: typeof THREE;
   }
}

window.THREE = THREE;

require('three/examples/js/controls/OrbitControls');
require('three/examples/js/loaders/GLTFLoader');
_

経由： https://github.com/mrdoob/three.js/issues/9562#issuecomment-386522819

関連して有用なSO回答：

angularthree.jsangular-cliangular6
5
sentenza

ようやく2つの実用的な解決策に達しました（=>正確に言うと回避策）。

Webpackのインポートローダーの使用

[...] import-loader は、モジュールのスコープにグローバル変数を注入できるWebpackプラグインです。したがって、グローバル（!）実行コンテキストの名前空間は完全にクリーンなままですが、「コンパイル」中に、Webpackはグローバル変数のみが付属するモジュールのバインディングを検索する場所を見つけることができます。

経由 このthree.jsチケット

import "imports?THREE=three!loaders/BinaryLoader";

このインポートを使用して、npmモジュールで定義されたグローバル変数としてTHREEを使用するようにWebpackに指示します'three'およびBinaryLoaderは、どの変数にもバインドされません。

Three-fullを使用して、THREE名前空間を提供します

プロジェクト three-full は、ローダーやコントロールなどのいくつかの「例」を追加して、標準のthree.jsライブラリによって定義された名前空間を拡張します。従来のthree npmパッケージの代わりにそれを使用すると、three.jsに基づくプロジェクトの大多数の一部である最も一般的で有用なクラスのES6名前空間を完全にサポートできます。

npm install --save three-full

そして名前空間全体をインポートすることができます：

import * as THREE from 'three-full';
...
const loader = new THREE.ColladaLoader();
6
sentenza

小さなヘルパーライブラリを使用する方法、私は同じことをしたいと思っています-私はこれを見つけました： https://www.npmjs.com/package/ng-three

0
Devin McQueeney