はじめに
導入
基本は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>