はじめに

導入

基本はnpm経由でインストールし、バンドルしてから公開する。ただしここではcdnを使う。

サンプルで使ったthree.jsのバージョンはr149である。破壊的変更が多そうなので注意。

three.jsはbuild/three.jsに、アドオン関連はexamples/jsm/以下置かれている。cdn経由で使う場合、アドオン関連は全て個別にインポートしなければならない。これは地味に面倒だし、このウェブサイトのようにjs直書きする場合にコード補完が効かなくないのが不便。

最近は便利なので、type="module"を指定することで、ブラウザでimport構文を使ったjsコードを実行できる。アドオンに対してもコード補完が効くようにtype="importmap"を指定したい。

<script type="importmap">
{
  "imports": {
    "three": "https://unpkg.com/three@0.149.0/build/three.module.js",
    "three/examples/": "https://unpkg.com/three@0.149.0/examples/"
  }
}
</script>
<script type="module" src="./three01.js"></script>

importmapは2023年2月現在、IE11, Safariで未サポート。Mobile系も散々なので今のところes-modules-shimsを使う方法が推奨されている。

<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>