cdnとthree.jsで学ぶ最新3D表示の基本と応用完全ガイド

2025 9/27

2025/09/27

はじめに

本記事の目的

この記事は、Three.jsをCDN（コンテンツ配信ネットワーク）経由で簡単に導入し、手早く3D表現を試せるようにすることを目的としています。専門的な前提知識がなくても分かるよう、具体例を交えて丁寧に説明します。

なぜCDNを使うのか

CDNは、ライブラリを自分でダウンロードして配置する手間を省きます。例えば、数行の読み込みタグをHTMLに追加するだけで、ブラウザが外部サーバーから必要なファイルを取得してくれます。導入が速く、サンプルを試すのに適しています。

誰に向いているか

・Webで3D表現を始めたいフロントエンド初心者
・プロトタイプや動作確認を素早く行いたい開発者
・教材やデモを手軽に作りたいデザイナー

この記事の構成

続く章では、CDN導入の具体的な方法、モジュールの読み込み例、実用サンプル、拡張機能の利用方法、バージョン管理の注意点まで順に解説します。まずは基本を押さして、すぐに手を動かせるようにしましょう。

Three.jsとは？CDN導入のメリット

Three.jsとは

Three.jsは、Webブラウザ上で3Dグラフィックスやインタラクションを実現するJavaScriptライブラリです。カメラ・ライト・メッシュといった要素を組み合わせ、立方体や球体を回転させたり、光や影を表現したりできます。専門知識がなくてもサンプルを動かしながら理解しやすい設計です。

CDNとは

CDNは分散されたサーバ群から静的ファイルを高速に配信する仕組みです。Three.js本体や関連モジュールを自分のパソコンにインストールせず、外部のURLをHTMLに書くだけで読み込めます。ブラウザが直接取得するため設定が簡単です。

CDN導入のメリット

インストール不要：npmやビルドツールを使わず、scriptタグ1行で利用開始できます。プロトタイプや学習に向いています。
環境構築が不要：ローカルの設定や依存関係で悩む時間を減らせます。
バージョン管理が簡単：URLで最新版か特定バージョンを指定できます。
高速配信とキャッシュ：CDNの仕組みで読み込みが速くなる場合があります。

注意点（使い分けの目安）

ファイルサイズや依存が増えると読み込みが重くなることがあります。
オフラインでは使えません。
本格的な開発や最適化が必要な場合はnpmで管理してビルドする方法を検討してください。CDNは学習・試作・デモに特に適しています。

Three.jsをCDNで読み込む基本パターン

概要

最もシンプルな導入はHTMLにscriptタグを追加する方法です。用途に応じて「UMD（グローバル変数）」と「ESモジュール」の2パターンがあります。

UMD（グローバル変数）例

この場合、グローバル変数THREEを通じて使えます。例：const scene = new THREE.Scene();

ESモジュール例

import * as THREE from ‘https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.module.js’;
const scene = new THREE.Scene();

またはのように外部ファイルを指定できます。

実務上のポイント

バージョンは固定（r128や0.128.0など）することを推奨します。互換性の問題を避けられます。
UMDは既存のスクリプトに素早く組み込みたいときに便利です。モジュールはモダンな開発で依存管理がしやすいです。
scriptはheadでもbody末尾でも動作しますが、DOMや自前スクリプトとの読み込み順に注意してください。

type=”module”とESモジュール対応の読み込み例

概要

最近のThree.jsはESモジュール形式が主流です。scriptタグにtype=”module”を付けてCDNのモジュール版を読み込むと、import構文がそのまま使えます。モジュールはファイルごとにスコープを持つため、グローバル変数を汚しません。

基本的な読み込み例

以下のように書けば、Three.js本体と拡張モジュールをURLから直接importできます。

<script type="module">
import * as THREE from 'https://unpkg.com/three@0.126.1/build/three.module.js';
import { OrbitControls } from 'https://unpkg.com/three@0.126.1/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'https://unpkg.com/three@0.126.1/examples/jsm/loaders/GLTFLoader.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, innerWidth/innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);
// GLTFLoaderでモデルを読み込む例
const loader = new GLTFLoader();
loader.load('model.gltf', gltf => scene.add(gltf.scene));

function animate(){ requestAnimationFrame(animate); renderer.render(scene, camera); }
animate();
</script>

注意点

モジュールは遅延実行（deferred）されます。DOMが使える状態で処理できます。
file://で開くとCORSでブロックされることが多いので、ローカルで試す場合は簡易サーバーを使ってください（例: live server）。
古いブラウザはモジュール未対応です。対応状況を確認してください。

この方法なら、拡張モジュールも含めてCDNからシンプルに取り込めます。開発や試作で手軽に使える読み込み方です。

実用例―CDNでThree.jsを使った最小サンプル

目的

HTMLファイルだけで3Dオブジェクトを表示する最小サンプルを示します。CDNでthree.min.jsを読み込むだけで動きます。初心者でも試しやすい例です。

最小サンプル（そのまま保存して開けます）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Three.js CDN 最小サンプル</title>
<style>body{margin:0;overflow:hidden}</style>
</head>
<body>
<script src="https://unpkg.com/three@0.152.2/build/three.min.js"></script>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, innerWidth/innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 3;

function animate(){
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

window.addEventListener('resize', ()=>{
  camera.aspect = innerWidth/innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
});
</script>
</body>
</html>

ポイント解説

CDNはで一行読み込むだけです。
MeshNormalMaterialを使うと光源を用意しなくても色が付きます。
renderer.domElementをbodyに追加して画面に表示します。
リサイズイベントでカメラとレンダラーを更新すると、画面サイズ変化にも対応します。

このサンプルで動作を確認したら、ライトやテクスチャ、外部モデルの読み込みへ段階的に拡張できます。

拡張モジュール（GLTFLoaderなど）もCDNから利用可能

概要

Three.js本体だけでなく、GLTFLoaderやOrbitControlsなどの追加モジュールもCDNからimportできます。これによりBlenderなどで作成した3Dモデルの表示や、マウスで動かせるカメラ制御が手軽に実装できます。

よく使う読み込み例

ESモジュール形式で読み込む場合は、scriptにtype=”module”を付けます。例:

import * as THREE from 'https://unpkg.com/three@0.126.1/build/three.module.js';
import { GLTFLoader } from 'https://unpkg.com/three@0.126.1/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'https://unpkg.com/three@0.126.1/examples/jsm/controls/OrbitControls.js';

簡単な使い方（GLTF読み込み）

GLTFLoaderでモデルを読み込み、シーンに追加する基本例:

const loader = new GLTFLoader();
loader.load('model.gltf', gltf => {
  scene.add(gltf.scene);
}, undefined, err => console.error(err));

モジュールの種類と注意点

examples/jsm はESモジュール。type=”module”で使います。
非モジュール環境では examples/js（UMD）を使い、THREE.GLTFLoader のようにグローバルから参照します。
Three.js本体とexamplesのバージョンを合わせてください。バージョン不一致で動作しないことがあります。
モデルはCORS制約があるため、外部から読み込む際はサーバー設定に注意してください。

必要な拡張機能をCDNから気軽に取り入れれば、開発がぐっと楽になります。

CDN利用時のバージョン指定と注意点

バージョン指定の重要性

CDNの「latest」や無指定リンクは常に最新版を配信します。便利ですが、仕様変更で既存のコードが動かなくなることがあります。安定した動作を保つために、明示的にバージョンを指定することをおすすめします。

指定例

npm風（ES module向け）: https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js
旧来のパス例: https://unpkg.com/three@0.128.0/build/three.min.js
これらのようにmajor.minor.patchで固定すると、意図しない破壊的変更を避けられます。