🎶Three.jsの設定パターン
npmを使ってthree.jsとモダンなビルドツールをインストール出来ます。もしくは、静的ホスティングやCDNを使って素早く使い始めることも可能です。
このため、2015年からのJavaScript標準では、独自の異なるモジュールシステムが導入されています。これは通常、ESモジュールと呼ばれ、ESはECMAScriptの略です。依存関係やインターフェースといった主要な概念は変わりませんが、細部は異なっています。ひとつは、表記法が言語に統合されたことです。依存関係にアクセスするために関数を呼び出す代わりに、特別な import キーワードを使用します。
同様に、export キーワードは物事をエクスポートするために使用されます。関数、クラス、バインディングの定義（let、const、var）の前に表示されることがあります。
ESモジュールのインターフェースは、単一の値ではなく、名前付きバインディングのセットです。先のモジュールでは、formatDateを関数にバインドしています。他のモジュールからインポートする場合、値ではなくバインディングをインポートします。これは、エクスポートするモジュールがいつでもバインディングの値を変更でき、インポートするモジュールにはその新しい値が表示されることを意味します。
defaultという名前のバインディングがある場合、それはそのモジュールの主なエクスポートされた値として扱われます。この例でordinalのようなモジュールをインポートする場合、バインディング名の周りに中括弧がなければ、そのデフォルトバインディングを取得することになります。このようなモジュールでも、デフォルトのエクスポートと一緒に他のバインディングを別の名前でエクスポートすることができます。
デフォルトのエクスポートを作成するには、式や関数宣言、クラス宣言の前にexport defaultと記述します。
もう一つの重要な違いは、ESモジュールのインポートは、モジュールのスクリプトが実行される前に行われることです。つまり、import宣言は関数やブロックの中に書いてはいけないし、依存関係の名前は任意の式ではなく、引用符で囲まれた文字列でなければなりません。
three.jsはWeb用に構築されているため、Node.jsには必ずしも存在しないブラウザとDOM APIに依存しています。これらの問題のいくつかは、headless-glのようなシム（shims）を使用したり、TextureLoaderのようなコンポーネントをカスタム代替品で置き換えたりすることで解決することができます。他の DOM API は、それを使うコードと深く絡み合っている可能性があり、回避するのが難しいでしょう。Node.js のサポートを改善するための、シンプルでメンテナンス可能なプルリクエストを歓迎しますが、最初にあなたの改善点を議論するために issue を開くことをお勧めします。
必ず { "type": 「module" } を package.json に追加し、node プロジェクトで ES6 モジュールを有効にしてください。
gl は、ウィンドウを作成したり、完全なブラウザ環境をロードすることなく、Node.js で WebGL コンテキストを作成することができます。
WebGL 1.0.3 の仕様に完全に準拠することを目指しています。
お願い致します