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

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

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

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

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公式ではモジュール版が推奨されているようですね。

読み込み手順

1

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>
2

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

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

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

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

THREEをコンソールで表示
3

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.OrbitControlsをコンソールで表示

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

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

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

読み込み手順

1

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>
2

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

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

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

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

Chrome

THREEをコンソールで表示(Chrome)

Safari

THREEをコンソールで表示(Safari)

Firefox

THREEをコンソールで表示(Firefox)
3

OrbitControls.jsの読み込み

Three.jsにはカメラの動きを制御するTHREE.OrbitControlsクラスが存在します。
OrbitControls.jsは、Three.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);

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

THREE.OrbitControlsをコンソールで表示

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

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【縦横比を保つ】YouTube埋め込みをレスポンシブ対応にする

【縦横比を保つ】YouTube埋め込みをレスポンシブ対応にする

【videoタグ】HTMLでWebサイトに動画を埋め込む

【videoタグ】HTMLでWebサイトに動画を埋め込む

画像のみにAccess-Control-Allow-Originを設定する方法

画像のみにAccess-Control-Allow-Originを設定する方法

【Google Maps API】Googleマップ埋め込みのピンを変更する

【Google Maps API】Googleマップ埋め込みのピンを変更する

【CSS】mix-blend-modeで乗算などを表現する方法

【CSS】mix-blend-modeで乗算などを表現する方法

【Macユーザー向け】ngrokでローカル環境のサイトを外部へ公開

【Macユーザー向け】ngrokでローカル環境のサイトを外部へ公開