webpack、threejsサンプル、およびtypescriptを使用していますか？

Question

Webpackやtypescriptで動作するように、3つの例（EffectComposerやDetectorなど）で問題が発生しています。

最初に該当する*.d.tsファイルがすべて存在し、tsdでインストールされています。私の問題は、Webpackがデフォルトの3jsビルド（すなわち、examples/js/のもの）の外にファイルを実際にインクルードするようになっています。私は正常に動作しますが、前述のグッズのいずれかを欠い

import THREE = require('three'); 

ような何かを行うことができますNPMからインストールthreeで

。プラグインをバンドルするnpmにはいくつかの3jsパッケージがありますが、typescriptコンパイラではrequire('three-js')(['EffectComposer'])が拒否されているとは思われません。

このパッケージには（後処理のような）私はあなたのIDE内活字体とThreeJS統合に関するご質問のほんの一部にお答えしようとします。

これまで見てきたように、部品のほとんどはDefinitelyTypedのアーカイブでホストされている？

Answer 1

は、ここで私のために働いたものです。

$ npm install --save-dev exports-loader imports-loader 

その後、three/examples/jsから何かを使用するように、私はこれを行う：

const THREE = require('three'); 
// imports provides THREE to the OrbitControls example 
// exports gets THREE.OrbitControls 
THREE.OrbitControls = require('imports?THREE=three!exports?THREE.OrbitControls!../../node_modules\/three\/examples\/js\/controls\/OrbitControls'); 

// use THREE.OrbitControls ... 

は私が行うには正しいことが必要でそれらを埋め込むのではなく、 importsと exportsローダー by configを使用していると思います。私はこの回答を更新するつもりです。

Answer 2

を活字体。私はお勧めしますtsdの使用を停止し、typingに移行してください。

typings.jsontypingが消費する基本値は以下のとおりです。最新の主要なThreeJSと、エフェクトコンポーザーライブラリがTypeScriptによって認識されるようになりました。コミットハッシュタグは.tsdが進化するにつれて変化することに注意してください。

{ 
    "ambientDependencies": { 
    "three": "github:DefinitelyTyped/DefinitelyTyped/threejs/three.d.ts#c6c3d3e65dd2d7035428f9c7b371ec911ff28542", 
    "three-projector": "github:DefinitelyTyped/DefinitelyTyped/threejs/three-projector.d.ts#48f20e97bfaf70fc1a9537b38aed98e9749be0ae", 
    "three-detector": "github:DefinitelyTyped/DefinitelyTyped/threejs/three-effectcomposer.d.ts#48f20e97bfaf70fc1a9537b38aed98e9749be0ae", 
    "three-effectscomposer": "github:DefinitelyTyped/DefinitelyTyped/threejs/detector.d.ts#48f20e97bfaf70fc1a9537b38aed98e9749be0ae", 
    "three-shaderpass": "github:DefinitelyTyped/DefinitelyTyped/threejs/three-shaderpass.d.ts#ee05b1163d8da7f16719f08d52f70ab524f1003a" 
    } 
} 

添付されているのは、EffectsComposerのパブリックメソッドを認識するIDEのスナップショットです。 TypeScriptのさまざまなモジュールローダー機能を試してみることもできます。

Answer 3

私はOrbitControlsを（webpack v2 + ts-loader）とバンドルでき、他のローダーはバンドルできませんでした。

package.json：

"dependencies": { 
    "three": "^0.85.2", 
    "@types/three": "^0.84.12", 
    "ts-loader": "^2.1.0", 
    "typescript": "^2.3.4", 
    "webpack": "^2.6.1" 
}, 

entrypoint.ts：

import * as THREE from "three"; 

// OrbitControls.js expects a global THREE object 
(window as any).THREE = THREE; 

// NOTE: OrbitControls must be included with require: 
// using "import" cause it to be executed before global THREE becomes available 
require("three/examples/js/controls/OrbitControls"); 

// ... code that uses THREE and THREE.OrbitControls 

注：OrbitControls.jsが適切なJSモジュールではないのでWebPACKのは、"export 'OrbitControls' (imported as 'THREE') was not found in 'three'のように警告してもよいです。私はこの警告を無視できると思います。

Answer 4

これを設定するきれいな方法は、webpack.config.jsにあります。

ダンの答えを1として：それはthree.js例はTHREEオブジェクトへのコンストラクタを追加しますので、私たちは実際に、exports-loaderを必要としないが判明し

$ npm install --save-dev imports-loader

。その後

、モジュールのパスがthree/examples/jsを含む何でもすることを決議した場合にwebpack.config.jsに、我々はインポートされたモジュールにvar THREE = require('three');を追加するためのルールを追加することができますが：彼らは期待していたときに

module: { 
    rules: [ 
    ... 
    { 
     test: /three\/examples\/js/, 
     use: 'imports-loader?THREE=three' 
    } 
    ] 
} 

今の例のモジュールは三つのグローバルわかりますそれ。少し冗長の例をインポートするようにする次に

、：

resolve: { 
    alias: { 
    'three-examples': path.join(__dirname, './node_modules/three/examples/js') 
    }, 
    ... 
}, 

これはwebpack.config.jsはnode_modulesと同じディレクトリにあることを前提とし、それに応じて調整します。その副作用のためにモジュールをインポートする

import * as THREE from 'three'; 
import 'three-examples/controls/OrbitControls'; 

：

今、私たちはそのようにサンプルファイルを使用することができます。