Three.js（スリージェイエス）は、ブラウザ上で 3D グラフィックスを描画するための JavaScript ライブラリです。2010 年に Ricardo Cabello 氏（通称 Mr.doob）によって公開され、WebGL の冗長な API をシーン・カメラ・メッシュといった直感的な抽象でラップすることで、Web 開発者でも比較的容易に 3D 表現を扱えるようにしました。プロダクト紹介、データビジュアライゼーション、ブラウザゲーム、メタバース系サービスなど幅広い領域で採用されており、フロントエンド分野で 3D を語るとき真っ先に名前が挙がる事実上の標準ライブラリです。GitHub スター数も極めて多く、活発に更新が続いています。
この記事の目次
- Three.js の基本構成要素
- Three.js が得意とする用途と弱点
- 学習を始めるための基本パターン
- 周辺エコシステムと派生フレームワーク
- まとめ
Three.js の基本構成要素
Three.js のプログラムは、シーン・カメラ・レンダラーという三つのオブジェクトを軸に組み立てます。シーンは 3D 空間そのもので、ライトやメッシュ（形状＋マテリアル）を子要素として追加していきます。カメラは視点を表し、最も一般的なのは遠近感を持つ PerspectiveCamera で、画角・アスペクト比・近遠クリップ面を指定します。レンダラーは WebGL や WebGPU を裏で叩いて、シーンをカメラ視点でキャンバスに描画する役割を担います。この三つを毎フレーム描画ループに渡すことでアニメーションが成立します。
形状を作るときは、ジオメトリ（頂点情報）とマテリアル（色や質感）を組み合わせてメッシュにします。BoxGeometry や SphereGeometry のような基本図形に加え、glTF や OBJ などの 3D モデルファイルをローダーで読み込むこともできます。マテリアルは MeshBasicMaterial のように陰影を持たないものから、MeshStandardMaterial のように物理ベースレンダリング（PBR）に対応したものまで段階的に選べるため、表現の重さとリッチさのトレードオフを調整しやすい設計になっています。
Three.js が得意とする用途と弱点
Three.js の典型的な用途は、商品の 360 度ビューア、地球儀や分子構造のビジュアライゼーション、軽量なブラウザゲーム、建築のウォークスルー、そして WebXR を使った VR/AR 体験のエントリポイントなどです。Web 標準の WebGL の上に薄く乗っているため、特別なプラグインなしにブラウザだけで動き、スマートフォンでも比較的軽量に動作します。ポストプロセスや影、屈折、IBL（環境光）といった現代的なエフェクトも、サンプルが豊富に揃っているので組み合わせていくだけで近代的なルックを作れます。
一方で、ゲームエンジンとしての完成度では Unity や Unreal、Babylon.js のような物理エンジン統合、シーンエディタ、衝突検出などの機能はやや薄く、自前で補う部分が多くなります。また、頂点数の多いモデルや高品質シェーダーを多用すると一気にフレームレートが落ちるため、モバイルを含めて配信するにはアセットの軽量化と LOD（詳細度切り替え）の検討が欠かせません。React と組み合わせる場合は React Three Fiber を使うのが定番で、宣言的にシーンを記述できるようになります。
学習を始めるための基本パターン
学習の最短経路は、まず公式サイトの「Creating a scene」チュートリアルに沿って、回転するキューブを 1 枚のページに表示することです。シーン・カメラ・レンダラーを作って DOM に append し、requestAnimationFrame で毎フレーム描画する基本パターンを体得すれば、その後はジオメトリの差し替え、ライトの追加、テクスチャの貼り付けと段階的に拡張していけます。GLTFLoader を使って Sketchfab などから取得したモデルを読み込めるようになると、表現の幅が一気に広がります。
プロダクションで使うときは、画面リサイズ時にカメラのアスペクト比とレンダラーのサイズを更新する処理、devicePixelRatio の上限制御、アンマウント時に geometry/material/texture を dispose する処理を忘れずに入れる必要があります。これを怠ると SPA でページを行き来するたびに GPU メモリがじわじわ漏れていきます。OrbitControls や Stats.js などの周辺ユーティリティも公式に近い examples 配下にまとまっており、最初はそこからコピーして使うと安全です。
周辺エコシステムと派生フレームワーク
Three.js は素のまま使うと命令的な API で、シーンに add したオブジェクトを参照保持しながら手続き的に更新していくスタイルになります。React や Vue のような宣言的フレームワークと一緒に使うと相性が悪くなりがちなため、React 用には React Three Fiber（R3F）、Vue 用には TresJS のようなラッパーが整備されており、コンポーネントとして 3D シーンを記述できます。R3F に対しては、drei というユーティリティ集や、物理演算用の rapier 連携などが揃い、エコシステム全体で開発体験を底上げしています。
また、Three.js を土台にしたゲームエンジンや、SaaS 型のシーンエディタ、WebXR フレームワークなども多数存在します。Babylon.js が「ゲーム志向の対抗馬」だとすれば、Three.js は「Web プラットフォーム志向の柔軟な基盤」という性格付けで、両者は補完的な関係にあります。学習リソースも書籍・公式 examples・YouTube・Bruno Simon 氏の Three.js Journey のような有料コースまで層が厚く、長期的に取り組む価値のある定番技術と言えます。
まとめ
Three.js は、WebGL の煩雑さを覆い隠して 3D グラフィックスをアプリ開発者の手に届けたフロントエンド領域の定番ライブラリです。シーン・カメラ・レンダラーの三点セットを軸に、軽量な演出から本格的な可視化、WebXR まで段階的に拡張できる柔軟さが魅力で、R3F などの上位フレームワークも含めて学んでおくと、Web 表現の引き出しが大きく広がります。
※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。
コメント