Three.jsをCDNから読み込む方法

2022.07.09

どうも！かけちまるです！

Three.jsを実装するときはnpmからインストールするのが最良の方法とされています。

ですが、Node.jsとnpmの知識が必要ですし、そもそも慣れていないと環境構築に時間がかかるというようにThree.jsを触りたいだけなのにやることが多いです。

そこでThree.jsをCDNで読み込む方法を学び、サクッとThree.jsに触れるようにしたいと思います。

この記事では、

・CDN（モジュール未使用版）でThree.jsを読み込む方法
・CDN（モジュール版）でThree.jsを読み込む方法

がわかります。

ディレクトリ構成

この記事では、次のディレクトリ構成を想定して解説を進めていきます。

ディレクトリ構成
コピー
index.html
js/
   -main.js

CDN（モジュール未使用版）で読み込む

これはThree.jsを読み込む1番手軽な方法だと思います。
しかし、Three.js公式ではモジュール版が推奨されているようですね。

読み込み手順

CDNでThree.jsを読み込む

UNPKGからThree.jsをCDNで読み込みます。
index.htmlは次のようになります。

注意

・three.min.jsがthree.module.jsとかになっているとエラーになります。
※three.module.jsはモジュール版になります。

index.html
コピー
<script src="https://unpkg.com/three@0.142.0/build/three.min.js"></script>
<script src="./js/main.js"></script>

Three.jsが読み込めているか確認

main.jsでThree.jsが読み込めているか試してみましょう。

main.js
コピー
console.log(THREE);

これでコンソールが下画像のようになったら読み込み成功です。

OrbitControls.jsの読み込み

Three.jsにはカメラの動きを制御するTHREE.OrbitControlsクラスが存在します。
OrbitControls.jsは、Three.jsライブラリの本体に含まれていないので使用する場合は別途読み込む必要があります。

注意

・https://unpkg.com/three@0.142.0/examples/js/controls/OrbitControls.js マーカー部分がjsmですとモジュール版なのでエラーになります。

index.html
コピー
<script src="https://unpkg.com/three@0.142.0/build/three.min.js"></script>
<script src="https://unpkg.com/three@0.142.0/examples/js/controls/OrbitControls.js"></script>
<script src="./js/main.js"></script>

main.js
コピー
console.log(THREE);
console.log(THREE.OrbitControls);

これでコンソールが下画像のようになったら読み込み成功です。

Three.jsには、OrbitControls.jsのように使用する場合は別途読み込みが必要なものがあるので注意が必要です。

CDN（モジュール版）で読み込む【推奨】

CDNで読み込むのであればモジュール版が推奨なので、できればこちらの方法で読み込むと良いでしょう。

読み込み手順

CDNでThree.jsを読み込む

UNPKGからThree.jsをCDNで読み込みます。

モジュール版ではimportmapを定義する必要があります。
importmapは、SafariやFirefoxではサポートされていないので“es-module-shims.js”というライブラリも読み込んでおきましょう。

“es-module-shims.js”は、機能未搭載のブラウザにその機能を提供してくれるというものらしいです。

注意

・”es-module-shims.js”の読み込みはasyncをつけること
・three.module.jsを使うこと。
three.min.jsとかはモジュール版ではないのでエラーになります。

index.html
コピー
<script async src="https://unpkg.com/es-module-shims@1.5.8/dist/es-module-shims.js"></script>
<script type="importmap">
   {
       "imports": {
           "three": "https://unpkg.com/three@0.142.0/build/three.module.js"
       }
   }
</script>
 
<script src="./js/main.js" type="module"></script>

Three.jsか読み込めているか確認

>main.jsでインポートし、Three.jsが読み込めているか試してみましょう。

main.js
コピー
import * as THREE from 'three';
 
console.log(THREE);

これでコンソールが下画像のようになったら読み込み成功です。

Chrome

Safari

Firefox

OrbitControls.jsの読み込み

index.html
コピー
<script async src="https://unpkg.com/es-module-shims@1.5.8/dist/es-module-shims.js"></script>
<script type="importmap">
   {
       "imports": {
           "three": "https://unpkg.com/three@0.142.0/build/three.module.js",
           "OrbitControls": "https://unpkg.com/three@0.142.0/examples/jsm/controls/OrbitControls.js"
       }
   }
</script>
 
<script src="./js/main.js" type="module"></script>

main.js
コピー
import * as THREE from 'three';
import {OrbitControls} from 'https://unpkg.com/three@0.142.0/examples/jsm/controls/OrbitControls.js';
 
console.log(THREE);
console.log(OrbitControls);

これでコンソールが下画像のようになったら読み込み成功です。