three.js 入門 (2) - インストール

npaka

2021年1月27日 20:00

以下の記事が面白かったので、ざっくり翻訳しました。

・Installation – three.js docs

前回

1. インストール

「tree.js」のインストール方法はいくつかあります。

・npmからのインストール
・CDNまたは静的ホスティングからのインストール

基本的には、「npmからインストール」が最良の選択になります。

◎ npmからのインストール
npmからインストールするには、以下のコマンドを実行します。

$ npm install --save three

これで、コードにインポートする準備が整いました。

// オプション1: three.js全体をインポート
import * as THREE from 'three'

const scene = new THREE.Scene()

// オプション2: 必要なパーツのみインポート
import {Scene} from 'three'

const scene = new Scene()

全機能がthreeモジュールから利用できるわけではありません。コア以外の機能（controls, loaders, post-processing effectsなど）は、examples/jsmサブフォルダからインポートする必要があります。

◎ CDNまたは静的ホスティングからのインストール
「three.js」は、CDNまたは静的ホスティングからインストールすることも可能です。ライブラリはESModulesに依存しているため、参照するスクリプトには、「type = "module"」を指定する必要があります。

<script type="module">
  import * as THREE from 'https://unpkg.com/three/build/three.module.js'
  const scene = new THREE.Scene()
</script>

全機能がbuild/three.module.jsから利用できるわけではありません。ライブラリのコア以外の機能（controls, loaders, post-processing effectsなど）は、examples/jsmサブフォルダからインポートする必要があります。

2. examples

「three.js」のコアは、3Dエンジンの最も重要なコンポーネントに焦点を当てています。便利コンポーネント（controls, loaders, post-processing effectsなど）は、examples/jsmフォルダの一部です。これらは「examples」と呼ばれます。

npmからインストールした場合は、次のように他のコンポーネントをインストールできます。

import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';

const controls = new OrbitControls();

CDNからインストールした場合は、同じCDNを使用して他のコンポーネントをインストールできます。

<script type="module">
  import { OrbitControls } from 'https://unpkg.com/three/examples/jsm/controls/OrbitControls.js';

  const controls = new OrbitControls();
</script>

全てのファイルが同じバージョンを使用することが重要です。

3. 互換性

◎ CommonJSのインポート
最近のほとんどのJavaScriptバンドラは、デフォルトでESModulesをサポートしていますが、一部の古いビルドツールはサポートしない場合があります。そのような場合、ESModulesを理解するようにバンドラを設定する必要があります。例えば、Browserifyにはbabelifyプラグインが必要になります。

◎ import maps
npmからインストールする場合、CDNまたは静的ホスティングからインストールする場合と比較して、インポートされるパスは異なります。これは、両方のユーザーグループにとって問題であるとを認識しています。ビルドツールとバンドラを使用する開発者は、相対パスではなくベアパッケージ指定子（「three」など）を好み、examples/フォルダ内のファイルは、この期待に従わないthree.module.jsへの相対参照を使用します。ラピッドプロトタイピング、学習、または個人的な好みのためにビルドツールを使用しない人は、特定のフォルダ構造を必要とし、グローバルなTHREE名前空間よりも寛容でない相対的なインポートを嫌う可能性があります。

「import maps」が広く利用可能になった時、これらの相対パスを削除し、npmパッケージ名「three」のベアパッケージ指定子に置き換えたいと考えています。これは、npmパッケージに対するビルドツールの期待とより密接に一致し、ファイルをインポートするときに両方のユーザーグループがまったく同じコードを記述できるようにします。ビルドツールを避けたいユーザーの場合、単純なJSONマッピングですべてのインポートをCDNまたは静的ファイルフォルダーに転送できます。実験的に、import maps exampleに示すように、import maps polyfillを使用して、より単純なインポートを使用してみることができます。

◎ Node.js
Node.jsでthree.jsを使用することは、次の2つの理由で難しい場合があります。

1つ目は、「three.js」はWeb用に設計されているため、Node.jsに常に存在するとは限らないブラウザとDOMAPIに依存します。これらの問題のいくつかは、headless-glのようなシムを使用するか、TextureLoaderのようなコンポーネントをカスタムの代替に置き換えることで解決できます。他のDOMAPIは、それらを使用するコードと深く絡み合っている可能性があり、回避するのが難しくなります。Node.jsサポートを改善するためのシンプルで保守可能なプルリクエストを歓迎しますが、最初に問題を開いて改善について話し合うことをお勧めします。

2つ目は、ESModulesのNode.jsサポートは複雑です。Node.js v12以降、コアライブラリはrequire（ 'three'）を使用してCommonJSモジュールとしてインポートできます。ただし、examples/jsmのほとんどのサンプルコンポーネントはできません。Node.jsの将来のバージョンではこれが解決される可能性がありますが、それまでの間、Node.jsアプリケーションがESモジュールを認識できるようにするためにesmなどの回避策を使用する必要があるかもしれません。

4. TypeScriptの設定

「three.js」はJavaScriptベースのライブラリでが、宣言ファイル（d.ts）を公開しているため、「TypeScript」で使用することもできます。

// tsconfig.jsonの設定例
{
  "compilerOptions": {
    "target": "es6",
    "moduleResolution": "node",
  },
  "include": [ "./src/**/*.ts" ],
}

次回

この記事が気に入ったらサポートをしてみませんか？