Web 3D開発において、Three.jsは不可欠なライブラリの一つです。WebGLを基盤としており、低レベルの知識なしで高速に魅力的な3Dシーンを作成することができます。シンプルな製品プレゼンテーションから複雑なメタバースアプリケーションまで幅広く利用されています。
初心者がThree.jsに触れる際、「3D座標系」「マテリアル」「照明」などの概念によって却下されることもありますが、以下の順序で学ぶことで段階的に習得できます。「基本コンポーネント→コア操作→高度な機能→実践的な最適化」。この記事では、Three.jsの学習過程における重要なポイントをまとめ、詳細なコード例と落とし穴を避けられるガイドを提供します。
1. 初心者向け：3Dシーンの最小構成要素
すべてのThree.jsプログラムは4つの主要なコンポーネントに依存しており、これらは3Dシーンを構築するための基礎となります。
1.1 シーン(Scene): 3D空間の「コンテナ」
シーンは仮想の3Dステージであり、表示したいオブジェクト、ライト、カメラをこのステージに配置する必要があります。また、オブジェクトの階層関係を管理でき、親オブジェクトの動きを子オブジェクトに伝播させることが可能です。
主な使用法:
// シーンの作成
const world = new THREE.Scene();
// 背景色の設定（白色）
world.background = new THREE.Color(0xffffff);
// オブジェクトの追加（meshは後のモデル）
world.add(mesh);
// フォグ効果の設定（遠くのオブジェクトが薄くなり、景深を表現）
world.fog = new THREE.Fog(0xffffff, 10, 50); // 領域、近距離、遠距離
学習の焦点: シーンの「コンテナ」性質を理解し、addメソッドの階層構造のロジックをマスターすること（親オブジェクトが動くと、子オブジェクトも一緒に動きます）。
1.2 カメラ(Camera): 3D空間の「目」
カメラは人間の目の視点を模倣し、どの部分がスクリーンにレンダリングされるかを決定します。Three.jsで最も一般的に使用されるのは透視カメラと直交カメラで、それぞれの適用シーンは異なります。
主要なタイプと使用法:
- PerspectiveCamera（透視カメラ）: 現実世界の「遠くが小さくなる」効果をシミュレートし、ほとんどの3Dシーン（ゲーム、製品プレゼンテーションなど）で使用されます。
// パラメータ: 視野角(fov)、アスペクト比(aspect)、近クリッププレーン(near)、遠クリッププレーン(far)
const view = new THREE.PerspectiveCamera(
75, // 視野角：レンズがカバーできる角度（単位：度）
window.innerWidth / window.innerHeight, // アスペクト比：キャンバスサイズに合わせる
0.1, // 近クリッププレーン：カメラより近い物体はレンダリングされない
1000 // 遠クリッププレーン：カメラより遠い物体はレンダリングされない
);
// カメラの位置を調整（デフォルトでは原点、物体を見るためには距離を空ける必要がある）
view.position.z = 5;
- OrthographicCamera（直交カメラ）: 透視効果がないため、遠くと近くの物体の大きさは同じで、2Dゲーム、エンジニアリング図面、UIインターフェースなどに適しています。
// パラメータ: 左、右、上、下、近、遠
const view = new THREE.OrthographicCamera(
-window.innerWidth/2,
window.innerWidth/2,
window.innerHeight/2,
-window.innerHeight/2,
0.1,
1000
);
学習の焦点:
- 透視カメラの4つのパラメータの意味：特に近/遠クリッププレーンが適切に設定されていないと、物体が「消えてしまう」可能性があります（近クリップが近すぎたり、遠クリップが遠すぎるとパフォーマンスに影響を与える場合があります）。
- カメラの主要なメソッド：position（位置の設定）、lookAt（カメラが特定のポイントに向くようにする）。
- ウィンドウの適応：ウィンドウサイズが変更された場合、カメラのアスペクト比と射影行列を更新する必要があります（後述の実践セクションで完全なコードを紹介します）。
1.3 レンダラー(Renderer): 3D空間の「ブラシ」
レンダラーは「シーン+カメラ」の組み合わせをウェブページのDOM要素に描画します（基本的にWebGL APIを使用してグラフィックスレンダリングを行います）。その設定は画面の品質とパフォーマンスに直接影響を与えます。
主な使用法:
// レンダラーの作成、アンチエイリアシングの有効化（画面が滑らかになる）
const painter = new THREE.WebGLRenderer({ antialias: true });
// レンダリングサイズの設定（ウィンドウサイズに合わせる）
painter.setSize(window.innerWidth, window.innerHeight);
// キャストシャドウの有効化（デフォルトでは無効、手動で有効にする必要がある）
painter.shadowMap.enabled = true;
// シャドウの品質の最適化
painter.shadowMap.type = THREE.PCFSoftShadowMap;
// レンダリングキャンバスをページに追加（painter.domElementはcanvas要素）
document.body.appendChild(painter.domElement);
// 一度のレンダリング（アニメーションの場合はループ呼び出しが必要）
painter.render(world, view);
学習の焦点: アンチエイリアシング、シャドウの有効化、ピクセル比の最適化（painter.setPixelRatio(window.devicePixelRatio)を使用して高解像度ディスプレイでのぼかしを解決）。
1.4 オブジェクト(Mesh): 3D空間の「俳優」
Meshはシーン内で可視化される3Dオブジェクトであり、ジオメトリとマテリアルで構成されます。ジオメトリは形状を定義し、マテリアルは外観を定義します。これらが組み合わさることで可視化可能なモデルが形成されます。
主要な構成:
- ジオメトリ(Geometry)