THREE.js - three.js機能のサブセットを簡単に構築する方法はありますか？

Question

three.jsの現在のバージョンは、さらに縮小された約0.5メガバイトの重い獣です。 HTTP配信ファイルをできるだけ小さく保つために必要な機能のサブセットのみを構築する方法（ソースをハッキングする以外の方法）はありますか？

Answer 1

私は簡単な方法はないと言います。チェックリストユーティリティなどはありません。しかし、最大の問題は、個々のコンポーネントが実際には小さく、より一般的な機能に依存しているということです。 I.あなたがそれを必要としない場合は、THREE.PlaneGeometryのようなファイルを削除することもできますが、そのファイル自体は本当に小さいです：あなたが本当ににより任意の実際のスペースを節約していないので、それは、PlaneBufferGeometryを利用していますので

function PlaneGeometry(width, height, widthSegments, heightSegments) { 

     Geometry.call(this); 

     this.type = 'PlaneGeometry'; 

     this.parameters = { 
      width: width, 
      height: height, 
      widthSegments: widthSegments, 
      heightSegments: heightSegments 
     }; 

     this.fromBufferGeometry(new PlaneBufferGeometry(width, height, widthSegments, heightSegments)); 

    } 

それを削除するので、planebuffergeometryを削除して、何かの利点が見えるようにしなければなりません。さらに、planebuffergeometryの大部分は、bufferGeometryの属性を使用します。任意のメッシュを使用します。

しかし、それは奇妙な副作用を作成することができます。ソースのクイック検索を実行すると、レンダラの背景としてテクスチャを使用したい場合、プレーンバッファードメトリーが使用されることがわかります。これは、深さや霧のテストがないジオメトリを作成し、そのプレーンバッファーメトリへのマップとして背景テクスチャを適用します。

この機能を使用する予定がない場合でも、プレーンバッファフロー測定に依存しているため、レンダリング関数の呼び出し時にnullポイント受信をスローする可能性があります。

コンポーネントの相互作用を予測するのは難しいので、あなたにとって不可欠なものとそうでないものを明確に言うことは難しく、a）必須ではなく、b）サイズが大きい特定のセクションを特定することは難しい。

おそらくあなたができることは、自分自身でビルドを実行し、インクルードを変​​更することです。自分でレポを作成することは、私のやり方がわからない質問とは異なる問題ですが、チュートリアルがある可能性があります。 but I found a pretty concise set of src's私はこれがThreejsレポの構築プロセスの一部だと考えています。コンポーネントを取り除いてビルドしてから、まだ動作しているものを見ることができます。

Answer 2

私は実際に専門用語もまさに魔法が行う100％わからないんだけど、バベル/ WebPACKのビルドシステムで、私は私がしたいモジュールを選択することができ、この

//myThree.js 
export { LineBasicMaterial } from 'three/src/materials/LineBasicMaterial' 
export { MultiMaterial } from 'three/src/materials/MultiMaterial' 
export { Mesh } from 'three/src/objects/Mesh' 
export { Object3D } from 'three/src/core/Object3D' 
... 

のようにそれらをエクスポートそして、あなたはまた、モジュールによってthree/src、モジュールから直接インポートすることができ

//myFoo.js 

import * as THREE from './myThree' 

言うことができるはずですが、私は手動で行う場合、これは非常に面倒であることが判明しました。