CREX｜XR

CREX｜XR

Three.js入門 使い方からできることまでわかりやすく解説

更新日：

Three.js入門、使い方からできることまでわかりやすく解説

現代のWebサイトは、単に情報を表示するだけでなく、ユーザーに豊かで没入感のある体験を提供することが求められています。その中で、Webブラウザ上でインタラクティブな3Dグラフィックスを実現する技術は、製品のビジュアライゼーション、データ可視化、オンラインゲーム、そしてメタバースといった新しい領域で急速に重要性を増しています。

この記事では、その中核を担うJavaScriptライブラリ「Three.js」について、基礎から応用までを網羅的に解説します。Three.jsとは何か、何ができるのか、そしてどのように始めればよいのかを、初心者にも分かりやすい言葉で丁寧に説明していきます。この記事を読み終える頃には、あなたもThree.jsを使った3Dコンテンツ制作の第一歩を踏み出すための知識と自信を身につけているはずです。

Three.jsとは

Three.jsとは

まず、Three.jsが一体何者なのか、その基本的な概念と、関連する技術であるWebGLとの関係について深く掘り下げていきましょう。このセクションを理解することが、Three.jsをマスターするための最初の、そして最も重要なステップとなります。

Webサイトで3D表現を可能にするJavaScriptライブラリ

Three.jsは、Webブラウザ上で3Dグラフィックスを簡単に作成し、表示するためのオープンソースのJavaScriptライブラリです。これまで、ブラウザ上で3Dを表現するには専門的なプラグインや特殊なソフトウェアが必要でしたが、Three.jsの登場により、HTML、CSS、JavaScriptといった標準的なWeb技術の延長線上で、誰でも手軽に3Dコンテンツ開発に挑戦できるようになりました。

このライブラリの最大の特徴は、3Dグラフィックスに関する複雑な処理を抽象化し、開発者が直感的なコードで3D空間を構築できる点にあります。「ライブラリ」とは、特定の機能を実現するためのプログラム部品の集まりを指します。Three.jsの場合、3Dオブジェクトの作成、光源（ライト）の設置、視点（カメラ）の設定、アニメーションといった、3Dコンテンツ制作に不可欠な機能が、あらかじめ使いやすい形で用意されています。

なぜ今、Webにおける3D表現がこれほど注目されているのでしょうか。その背景には、ユーザー体験の向上に対する強い要求があります。例えば、以下のような場面で3D表現は大きな力を発揮します。

  • Eコマース: 商品を360度あらゆる角度から確認できる3Dビュー。これにより、ユーザーは静的な画像だけでは分からない商品の質感や形状を深く理解でき、購買意欲の向上に繋がります。
  • 不動産・家具: オンライン上で物件の内見をしたり、自分の部屋に家具をAR（拡張現実）で配置したりするシミュレーション。物理的な制約を超えた体験を提供します。
  • 教育・医療: 人体の構造を3Dモデルで学習したり、複雑な医療データを立体的に可視化したりすることで、理解を格段に深めることができます。
  • ポートフォリオ・ブランディングサイト: 独創的でインタラクティブな3D演出を取り入れることで、訪問者に強い印象を与え、クリエイターや企業のブランド価値を高めます。

Three.jsは、こうしたリッチでインタラクティブなWeb体験を構築するための、非常に強力なツールなのです。フロントエンドエンジニアはもちろん、Webデザイナーやクリエイティブコーダー、データサイエンティストなど、幅広い分野の開発者やクリエイターによって世界中で利用されています。

WebGLとの関係

Three.jsを理解する上で欠かせないのが、WebGL（Web Graphics Library）との関係です。しばしば混同されがちですが、この二つは役割が異なります。

WebGLは、Webブラウザ上で高性能な2Dおよび3Dグラフィックスを描画するための、低レベルなAPI（Application Programming Interface）です。APIとは、ソフトウェアの機能を外部から利用するための「窓口」や「命令セット」のようなものです。WebGLは、コンピュータのグラフィックス処理を専門に行うハードウェアであるGPU（Graphics Processing Unit）のパワーを、JavaScriptから直接利用することを可能にします。これにより、プラグインなしで、ブラウザ上で非常に高速なグラフィックス描画が実現します。

しかし、「低レベル」という言葉が示す通り、WebGLを直接扱うのは非常に複雑で困難です。GPUを直接操作するに近いため、コードは非常に冗長になり、3Dグラフィックスの深い数学的知識（線形代数、特にベクトルや行列の計算など）が必須となります。例えば、WebGLで単一の立方体を描画するだけでも、頂点座標の定義、シェーダープログラム（頂点の位置や色を計算する小さなプログラム）の作成とコンパイル、バッファの管理など、何百行ものコードが必要になることがあります。

そこで登場するのがThree.jsです。Three.jsは、この複雑で難解なWebGLの処理を内部で肩代わりし、開発者に対してはるかに分かりやすく、直感的なAPIを提供する「ラッパーライブラリ」なのです。「ラップする」とは、複雑なものを覆い隠して、扱いやすい形に整えることを意味します。

項目 WebGL (直接利用) Three.js
抽象度 低レベル（GPUに近い） 高レベル（開発者フレンドリー）
主な役割 GPUを操作し、ピクセルを描画するためのAPI WebGLをラップし、3Dシーン構築を容易にするライブラリ
コード量 非常に多い（冗長） 少ない（簡潔）
必要な知識 3D数学、シェーダー言語(GLSL)など高度な知識 JavaScript、3Dの基本概念
具体例 立方体を描画するのに数百行のコードが必要 立方体を描画するのに十数行のコードで済む

この関係は、自動車の運転に例えると分かりやすいかもしれません。WebGLは、エンジンやトランスミッション、ステアリング機構といった、自動車を動かすための個々の部品やその制御システムそのものです。専門的な知識があれば、これらの部品を直接操作して車を動かすことは可能ですが、非常に手間がかかり、高度な技術が要求されます。

一方、Three.jsは、ハンドル、アクセル、ブレーキといった、運転席にあるインターフェースに相当します。開発者（ドライバー）は、エンジンの内部構造を知らなくても、「ハンドルを回せば曲がる」「アクセルを踏めば進む」という直感的な操作で、車（3Dコンテンツ）を意のままに操ることができます。

つまり、Three.jsはWebGLのパワーを損なうことなく、その複雑さだけを覆い隠してくれる便利な道具と言えます。これにより、開発者は「どのように描画するか（How）」という低レベルな実装の詳細から解放され、「何を描画したいか（What）」という創造的な部分に集中できるのです。Three.jsを学ぶことは、実質的にWebGLの強力な機能を、生産性の高い方法で活用する術を学ぶことと同義なのです。

Three.jsでできること

3Dモデルの描画、アニメーションの作成、物理演算シミュレーション、VR/ARコンテンツの作成

Three.jsがどのような技術であるかを理解したところで、次はその具体的な能力、つまり「何ができるのか」を見ていきましょう。Three.jsの可能性は非常に幅広く、開発者のアイデア次第で無限に広がります。ここでは、その代表的な活用例を4つのカテゴリに分けて紹介します。

3Dモデルの描画

Three.jsの最も基本的かつ強力な機能は、3Dモデルデータを読み込み、Webブラウザ上に描画することです。Blender、Maya、3ds MaxといったDCC（Digital Content Creation）ツールで作成された、精巧な3DモデルをWebサイトに組み込むことができます。

現代のWeb 3Dで標準的に使用されるフォーマットは glTF (GLB) です。これは「3D界のJPEG」とも呼ばれ、ジオメトリ（形状）、マテリアル（質感）、テクスチャ（画像）、アニメーションといった情報を1つのファイルに効率的に格納できるため、Webでの利用に最適化されています。Three.jsには、このglTF形式を簡単に読み込むための専用のローダー（GLTFLoader）が用意されています。

この機能を使えば、以下のような魅力的なコンテンツが実現可能です。

  • 製品の360度インタラクティブビュー: ユーザーがマウスやタッチ操作で商品を自由に回転させたり、拡大・縮小したりできます。自動車のコンフィギュレーター、スニーカーのカスタマイズ、精密機器の内部構造の確認など、静的な画像では伝えきれない情報を直感的に伝えられます。
  • 建築・インテリアのビジュアライゼーション: 建築モデルの中を歩き回るウォークスルー体験や、バーチャル空間で家具を自由に配置するシミュレーションなど、完成前からリアルなイメージを共有できます。
  • キャラクターやアバターの表示: ゲームやメタバース、バーチャルチャットなどで使用されるキャラクターモデルを表示し、ユーザーの分身としてインタラクションさせることが可能です。

3DモデルをWebに持ち込むことで、ユーザーは受動的に情報を受け取るだけでなく、能動的にオブジェクトと関わることができるようになり、エンゲージメントが飛躍的に向上します。

アニメーションの作成

静的な3Dオブジェクトを表示するだけでも十分にインパクトがありますが、Three.jsの真価は、それらを生き生きと動かすアニメーションを作成できる点にあります。オブジェクトの位置、回転、スケール（大きさ）といったプロパティを時間経過と共に変化させることで、あらゆる種類の動きを表現できます。

アニメーションの実装は、通常、JavaScriptの requestAnimationFrame という関数を用いて行われます。これはブラウザの描画タイミングに合わせて、特定の関数を繰り返し呼び出す仕組みです。この繰り返し処理（アニメーションループ）の中で、オブジェクトのプロパティを少しずつ変更し、毎フレーム再描画することで、滑らかな動きが生まれます。

// アニメーションループの概念的な例
function animate() {
  // 次のフレームで再びanimate関数を呼び出す
  requestAnimationFrame(animate);

  // オブジェクトを少しずつ回転させる
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  // シーンを再描画する
  renderer.render(scene, camera);
}

この基本的な仕組みを応用することで、以下のような多様なアニメーションが実現できます。

  • オブジェクトの単純な動き: ロゴが回転する、アイコンが跳ねる、背景のオブジェクトがゆっくりと漂うなど、Webサイトに動的なアクセントを加えます。
  • カメラアニメーション: カメラ自身を動かすことで、映画のようなドラマチックな演出や、シーンの中を巡るガイドツアーのような体験を作り出せます。
  • パーティクルシステム: 何千、何万という小さな点（パーティクル）をプログラムで制御し、炎、煙、星空、魔法のエフェクトなど、幻想的で美しいビジュアルを生成します。
  • インタラクティブなアニメーション: ユーザーのマウスの動きやスクロール操作に連動してオブジェクトが変形したり、特定の場所をクリックするとアニメーションが再生されたりするなど、ユーザーのアクションに応じた動的な演出が可能です。

アニメーションは、ユーザーの視線を引きつけ、情報を分かりやすく伝え、何よりもWebサイトを楽しく、記憶に残るものにするための強力な武器となります。

物理演算シミュレーション

よりリアルでインタラクティブな世界を構築するために、Three.jsは外部の物理演算エンジンと連携することができます。物理演算エンジンとは、重力、衝突、摩擦、反発といった現実世界の物理法則をコンピュータ上でシミュレートするためのライブラリです。

Three.js自体には物理演算機能は含まれていませんが、Cannon-esやRapierといったJavaScript製の物理エンジンと組み合わせることで、驚くほどリアルな挙動を再現できます。

その仕組みは、目に見えるThree.jsの3Dオブジェクト（ビジュアルメッシュ）と、目には見えない物理演算用のオブジェクト（フィジックスボディ）をペアで作成し、アニメーションループの中で両者の位置や回転を同期させる、というものです。ユーザーが操作するのはビジュアルメッシュですが、その動きの計算は物理エンジンが担当します。

この連携により、以下のような表現が可能になります。

  • リアルな物体の挙動: ボールを投げると放物線を描いて落下し、地面で跳ねる。積み上げたブロックがバランスを崩して崩れ落ちる。ビリヤードの球が互いに衝突し、リアルな角度で散らばる。
  • インタラクティブな環境: ユーザーがドラッグ＆ドロップでオブジェクトを掴んで投げたり、オブジェクト同士をぶつけたりして遊べるサンドボックス（砂場）のような環境を作成できます。
  • ソフトボディ・クロスシミュレーション: 布が風になびいたり、オブジェクトに当たって変形したりするような、硬い物体（リジッドボディ）だけではない、柔らかい物体のシミュレーションも可能です。

物理演算を取り入れることで、3D空間は単なる「絵」から、ユーザーが触れて、影響を与えることができる「世界」へと進化します。これにより、ゲーム性やリアリティが格段に向上し、ユーザーはより深くコンテンツに没入することができます。

VR/ARコンテンツの作成

Three.jsは、WebXR Device APIというWeb標準技術と連携することで、VR（仮想現実）およびAR（拡張現実）コンテンツを開発するためのプラットフォームとしても機能します。WebXRは、VRヘッドセットやAR対応スマートフォンといったデバイスのセンサー情報に、ブラウザからアクセスするためのAPIです。

  • VR (Virtual Reality): VRヘッドセットを装着したユーザーを、完全に3Dで構築された仮想空間の中に没入させる技術です。Three.jsを使えば、ユーザーが自分の頭の動きで360度を見渡せるVR空間や、コントローラーを使って仮想オブジェクトを掴んだり操作したりできるインタラクティブなVR体験を、Webブラウザ上で実現できます。WebサイトにアクセスするだけでVRコンテンツを体験できるため、専用アプリのインストールが不要という大きなメリットがあります。
  • AR (Augmented Reality): スマートフォンのカメラなどを通して、現実世界の風景に3Dオブジェクトを重ねて表示する技術です。Three.jsとWebXRを使えば、例えば「自分の部屋に購入検討中の家具を実物大で配置してみる」「街中の特定のマーカーをカメラで映すと、キャラクターや情報が浮かび上がる」といったAR体験を構築できます。

これまでネイティブアプリ開発の領域であったVR/ARコンテンツが、Three.jsによってWeb技術の延長線上で開発できるようになったことは、非常に大きな進歩です。Webの持つ「手軽さ」と「アクセシビリティ」を武器に、より多くの人々が未来のコンピューティング体験に触れる機会を創出します。

Three.jsを学ぶメリット

高度な3D表現を手軽に実装できる、主要なブラウザで動作する、豊富な機能とドキュメント

Three.jsができることの多様性を知ると、次に気になるのは「それを学ぶことで、自分にどんな良いことがあるのか？」という点でしょう。Three.jsの学習は、Web開発者やクリエイターにとって多くのメリットをもたらします。ここでは、その主な利点を3つ紹介します。

高度な3D表現を手軽に実装できる

Three.jsを学ぶ最大のメリットは、WebGLを直接扱うのに比べて、はるかに少ない労力で高度な3D表現を実装できることです。前述の通り、Three.jsはWebGLの複雑な部分を覆い隠し、開発者にとって分かりやすい概念で3D空間を扱えるように設計されています。

具体的には、Three.jsでは3D空間を以下のような直感的な要素の組み合わせとして構築します。

  • シーン (Scene): すべてのオブジェクトが配置される「舞台」や「世界」。
  • カメラ (Camera): その世界をどの視点から見るかを決める「目」。
  • オブジェクト (Object3D/Mesh): 形状（Geometry）と見た目（Material）を持つ「俳優」や「小道具」。
  • ライト (Light): オブジェクトを照らし、陰影を生み出す「照明」。

これらの要素をJavaScriptのオブジェクトとして生成し、シーンに追加していくだけで、基本的な3D空間が完成します。行列計算やシェーダー言語といった低レベルな詳細を意識することなく、「立方体を作って、シーンの中央に配置し、上から光を当て、斜め前からカメラで撮影する」といった、頭の中にあるイメージに近い形でプログラミングを進めることができます。

もちろん、突き詰めればベクトルや行列といった数学的な知識が必要になる場面もあります。しかし、Three.jsが提供する豊富なヘルパー関数やクラスを使えば、多くのケースで複雑な計算を自分で行う必要はありません。例えば、オブジェクトを特定の位置に「注目」させるlookAt()メソッドなど、便利な機能が多数用意されています。

この「手軽さ」と「抽象度の高さ」こそが、開発者を創造的な作業に集中させ、アイデアを素早く形にすることを可能にするのです。プロトタイピングの速度が劇的に向上し、トライ＆エラーを繰り返しながら表現を磨き上げていくクリエイティブな開発プロセスに非常に適しています。

主要なブラウザで動作する

Webコンテンツを開発する上で、クロスブラウザ対応は常に重要な課題です。特定のブラウザでしか動作しない技術では、届けられるユーザーが限定されてしまいます。その点、Three.jsは、その基盤であるWebGLがモダンブラウザの標準技術として広くサポートされているため、非常に高い互換性を誇ります。

現在、以下の主要なデスクトップおよびモバイルブラウザは、すべてWebGL（バージョン1.0および2.0）をサポートしています。

  • Google Chrome
  • Mozilla Firefox
  • Apple Safari
  • Microsoft Edge

これは、開発者がThree.jsで作成したコンテンツが、特別なプラグインや拡張機能のインストールをユーザーに求めることなく、世界中のほとんどのインターネットユーザーの環境でそのまま動作することを意味します。Windows、macOS、Linux、Android、iOSといったプラットフォームの違いを意識する必要もほとんどありません。

この「一度作れば、どこでも動く」という性質は、Webの最も強力な利点の一つです。企業がプロモーションサイトを制作する場合でも、個人がポートフォリオを公開する場合でも、より多くの人々に意図した通りの体験を届けられるという安心感は、技術選定における大きなアドバンテージとなります。

ただし、パフォーマンスの観点では、デバイスのGPU性能に依存するため、古いスマートフォンや低スペックなPCでは複雑なシーンの描画が遅くなる可能性がある点には留意が必要です。しかし、基本的な3D表現であれば、近年のほとんどのデバイスで快適に動作させることが可能です。

豊富な機能とドキュメント

Three.jsは2010年の登場以来、10年以上にわたって世界中のコントリビューターによって活発に開発が続けられてきました。その結果、ライブラリ自体が非常に多機能であると同時に、学習者を支えるためのドキュメントやリソースが極めて豊富に蓄積されています。

機能面では、基本的な図形（立方体、球、円柱など）から、テキストやSVG、外部モデルデータを元にした複雑な形状まで、多種多様なジオメトリを生成できます。マテリアルも、光を反射しないマットなものから、金属やガラスのような物理ベースのリアルな質感を持つもの、さらには自分でシェーダーを記述して独自の表現を作るためのものまで、幅広く用意されています。これらに加え、各種ローダー、カメラ制御、アニメーションヘルパー、数学ユーティリティなど、3Dコンテンツ制作に必要な機能のほとんどが網羅されています。

学習リソース面での最大の強みは、公式のドキュメントとサンプル集です。

  • 公式ドキュメント (threejs.org/docs/): Three.jsのすべてのクラス、メソッド、プロパティについて詳細に解説されたAPIリファレンスです。開発中に機能の詳細を確認したい場合に不可欠な情報源となります。
  • 公式サンプル集 (threejs.org/examples/): これがThree.jsの学習において非常に強力なツールです。ライブラリのほぼすべての機能を使った、何百もの動作サンプルがソースコード付きで公開されています。自分が実装したい表現に近いサンプルを見つけ、そのコードを参考にすることで、効率的に学習を進めることができます。「百聞は一見に如かず」を地で行く、最高の教材と言えるでしょう。

さらに、Three.jsは世界で最も人気のあるWebGLライブラリの一つであるため、巨大で活発なコミュニティが存在します。Stack Overflow、GitHub、Discord、各種ブログなどで、世界中の開発者が日々情報を交換し、質問に答え合っています。日本語の技術記事やチュートリアルも数多く存在し、学習の過程でつまずいたとしても、解決策を見つけやすい環境が整っています。この強力なエコシステムが、Three.jsを学ぶ上での大きな安心材料となっています。

Three.jsを学ぶデメリット

多くのメリットがある一方で、Three.jsの学習にはいくつかの挑戦的な側面も存在します。これらのデメリットや注意点を事前に理解しておくことで、より現実的な学習計画を立て、挫折を防ぐことができます。

学習コストが高い

「高度な3D表現を手軽に実装できる」というメリットは、あくまで「WebGLを直接扱う場合と比較して」という枕詞がつきます。Web開発の経験がある人にとっても、Three.jsの学習は決して簡単な道のりではありません。相応の学習コストがかかることは覚悟しておく必要があります。

その主な理由は、従来の2DのWeb開発とは異なる、3Dグラフィックス特有の概念や知識を習得する必要があるからです。HTML、CSS、JavaScriptの基礎知識は当然として、以下のようなトピックに直面することになります。

  • 3D座標系: X軸、Y軸に加えて、奥行きを表すZ軸が登場します。オブジェクトの位置、回転、スケールを3次元空間で考える必要があります。
  • ベクトルと行列: オブジェクトの位置や方向を表す「ベクトル」や、それらをまとめて変換（移動、回転、拡大縮小）するための「行列（マトリックス）」は、3Dグラフィックスの根幹をなす数学的な概念です。Three.jsが多くの計算を内部で行ってくれるとはいえ、これらの基本的な考え方を理解していると、より複雑な制御が可能になります。
  • カメラとプロジェクション: 3D空間を2Dの画面にどのように映し出すか（プロジェクション）を定義するのがカメラの役割です。遠近感を表現する「透視投影（Perspective Projection）」と、遠近感をなくして平行に描画する「正投影（Orthographic Projection）」の違いや、画角（FOV）、アスペクト比といったカメラのパラメータの意味を理解する必要があります。
  • マテリアルとライトとシェーダー: オブジェクトのリアルな質感を表現するためには、マテリアルの種類（Lambert, Phong, Standardなど）とライトの種類（平行光源, 点光源など）がどのように相互作用して陰影を生み出すのかを理解しなければなりません。さらに高度な表現を目指す場合は、GPU上で実行される小さなプログラムである「シェーダー」をGLSLという言語で記述する必要も出てきます。

これらの概念は、初学者にとっては抽象的で難解に感じられるかもしれません。Three.jsの学習は、単にライブラリのAPIを覚えるだけでなく、その背景にある3Dコンピュータグラフィックスの基礎理論を学ぶプロセスでもあるのです。一朝一夕にマスターできるものではなく、多くのサンプルコードを読み、実際に手を動かしながら、少しずつ理解を深めていく地道な努力が求められます。

パフォーマンスへの配慮が必要

3Dグラフィックスは、本質的にコンピュータの計算リソースを大量に消費する処理です。特にWebブラウザという限られた環境で動作させる場合、パフォーマンスへの配慮が常に重要になります。美しいビジュアルを実現できても、動きがカクカクしてしまっては、ユーザー体験を損なってしまいます。

Three.jsで開発を行う際には、以下のようなパフォーマンスに影響を与える要素を常に意識する必要があります。

  • ポリゴン数（頂点数）: 3Dモデルは、ポリゴンと呼ばれる小さな多角形（通常は三角形）の集まりで構成されています。このポリゴンの数が多ければ多いほど、モデルは滑らかで詳細になりますが、同時にGPUへの負荷も増大します。Webで快適に表示するためには、モデルのディテールを保ちつつ、ポリゴン数を適切に削減する「最適化」の作業が不可欠です。
  • ドローコール数: 「ドローコール」とは、CPUからGPUへ「このオブジェクトを描画してください」と命令を出すことです。この命令自体にもコストがかかるため、シーン内にオブジェクトが大量にあると、ドローコールの回数が増えてパフォーマンスのボトルネックになることがあります。同じ形状・マテリアルのオブジェクトを一つにまとめる（マージする）などの工夫で、ドローコールを削減することが重要です。
  • テクスチャの解像度と数: オブジェクトの表面に貼り付ける画像のことをテクスチャと呼びます。高解像度で多くのテクスチャを使用すると、VRAM（GPU専用のメモリ）を大量に消費し、読み込み時間や描画パフォーマンスに影響を与えます。適切な解像度にリサイズしたり、複数のテクスチャを1枚の画像にまとめる（テクスチャアトラス）といったテクニックが有効です。
  • ライトとシャドウ: シーン内に配置するライトの数、特に影（シャドウ）を生成するライトは、計算負荷が非常に高くなります。リアルタイムの動的な影は非常に高コストな処理であるため、本当に必要な箇所に限定して使用したり、影の解像度を調整したり、あるいは影を画像として事前に焼き付けておく（ベイクする）といった手法が用いられます。

特に、スマートフォンやタブレットなどのモバイルデバイスでは、PCに比べてGPU性能やメモリに大きな制約があります。デスクトップPCでは快適に動作していたシーンが、モバイルでは全く動かないということも珍しくありません。開発の初期段階から、ターゲットとするデバイスの性能を考慮し、常にパフォーマンスを計測・改善していく姿勢が求められます。Three.jsは強力なツールですが、それを使いこなすには、こうした「見えない部分」への配慮が不可欠なのです。

Three.jsの始め方（環境構築）

Three.jsを実際に動かしてみるための準備は、驚くほど簡単です。ここでは、開発を始めるための環境構築の方法を、モダンな開発手法と手軽な手法の2つに分けて解説します。

Three.jsのインストール方法

Three.jsを利用するには、まずライブラリのファイルを自分のプロジェクトに導入する必要があります。主な方法は以下の2つです。

パッケージマネージャー（npm/yarn）を使う

ViteやWebpackといったモジュールバンドラを使った現代的なフロントエンド開発を行っている場合、この方法が最も推奨されます。Node.jsと、そのパッケージマネージャーであるnpmまたはyarnがPCにインストールされていることが前提です。

ターミナルを開き、プロジェクトのディレクトリで以下のコマンドを実行するだけで、Three.jsがプロジェクトの依存関係に追加されます。

npmの場合:

npm install three

yarnの場合:

yarn add three

インストールが完了すると、node_modulesディレクトリ内にThree.jsのファイルが配置されます。あとは、あなたのJavaScriptファイル内で、必要な機能をimportして使用するだけです。

// main.jsなどのエントリーファイル
import * as THREE from 'three';

// これでTHREEオブジェクト経由でThree.jsの機能が使える
const scene = new THREE.Scene();
// ...

この方法のメリットは、バージョン管理が容易であること、そしてモジュールバンドラの恩恵（不要なコードの削除、コードの分割など）を受けられることです。本格的なアプリケーションを開発する際には、こちらの方法を選択しましょう。

CDNから読み込む

「とにかく手っ取り早くThree.jsを試してみたい」「簡単なプロトタイプを作りたい」という場合には、CDN（Content Delivery Network）を利用するのが最も簡単です。CDNは、世界中に配置されたサーバーからコンテンツを高速に配信するサービスです。

HTMLファイルの<head>タグ内、または<body>タグの閉じタグ直前に、以下の<script>タグを一行追加するだけで準備は完了です。

<!-- 例: jsDelivr CDNを利用する場合 -->
<script type="module" src="https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js"></script>

※ latestの部分は、0.164.1のように具体的なバージョン番号を指定することが推奨されます。

この一行を記述するだけで、グローバルスコープ（windowオブジェクト）にTHREEというオブジェクトが定義され、Three.jsの全機能にアクセスできるようになります。ビルドツールなどの複雑な設定が一切不要なため、学習を始めたばかりの初心者や、HTMLファイル1枚で完結するような小規模なデモを作成する際に非常に便利です。

ただし、この方法ではThree.jsのライブラリ全体を読み込むため、最終的なファイルサイズが大きくなりがちです。また、外部のサービスに依存するため、オフライン環境では動作しません。

基本的なHTMLファイルの準備

Three.jsで描画した3Dコンテンツを表示するためには、その「キャンバス」となるHTMLファイルが必要です。最もシンプルな構成は以下のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Three.js入門</title>
  <style>
    /* CSSで余白をなくし、キャンバスを全画面表示にする */
    body {
      margin: 0;
      overflow: hidden; /* スクロールバーを非表示に */
    }
    canvas {
      display: block; /* canvas要素の余分な余白をなくす */
    }
  </style>
</head>
<body>
  <!-- Three.jsのスクリプトを読み込む -->
  <!-- CDNを使う場合 -->
  <!-- <script type="module" src="https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js"></script> -->

  <!-- 自分のJavaScriptファイルを読み込む -->
  <script type="module" src="./main.js"></script>
</body>
</html>

このHTMLファイルのポイントは以下の通りです。

  1. <!DOCTYPE html>: HTML5のドキュメントであることを宣言します。
  2. meta viewport: スマートフォンなどのモバイルデバイスで、表示が崩れないようにするためのおまじないです。
  3. CSSスタイル: bodyのmarginを0に設定し、ブラウザのデフォルトの余白を消しています。これにより、Three.jsが生成する<canvas>要素を画面いっぱいに広げやすくなります。overflow: hidden;は、意図しないスクロールバーが表示されるのを防ぎます。
  4. <script>タグ: <body>タグの末尾で、Three.jsのコードを記述するmain.js（ファイル名は任意）を読み込みます。type="module"を付けることで、ES Modulesの構文（import/export）が使えるようになります。パッケージマネージャーでインストールした場合も、バンドラが最終的に生成するJavaScriptファイルをここで読み込むことになります。

このシンプルなHTMLファイルと、先ほど紹介したインストール方法のいずれかを選べば、Three.jsプログラミングを始める準備は万端です。

Three.jsの基本的な使い方

環境が整ったところで、いよいよThree.jsの心臓部である基本的な概念について学んでいきましょう。どのような複雑な3Dシーンも、これから説明する3つの基本要素から成り立っています。この3要素の関係性を理解することが、Three.jsを使いこなすための鍵となります。

3D空間を構成する3つの基本要素

Three.jsの世界は、大きく分けて「シーン」「カメラ」「レンダラー」という3つのオブジェクトによって管理されます。これらを現実世界のアナロジーで考えると、非常に理解しやすくなります。

要素 アナロジー（例） 役割
シーン (Scene) 舞台、スタジオ、世界 3Dオブジェクト、ライト、カメラなどを配置するための空間（コンテナ）。
カメラ (Camera) 撮影機材、人間の目 3D空間のどの部分を、どのように切り取って見るかを決定する視点。
レンダラー (Renderer) 映写機、画家、現像所 シーンとカメラの情報をもとに、最終的な2D画像を計算し、ブラウザの画面に描画する装置。

これら3つが揃って初めて、私たちはブラウザ上に3Dグラフィックスを表示することができます。どれか一つでも欠けていると、何も映し出されません。それでは、各要素の役割と作成方法を詳しく見ていきましょう。

シーン (Scene) – 3Dオブジェクトを配置する空間

シーンは、これから作成するすべての3Dコンテンツの「入れ物」となる、最も基本的なオブジェクトです。これから作る3Dモデル、追加するライト、そしてその世界を映すカメラなど、すべての要素は最終的にこのシーンオブジェクトに追加（add）されます。

シーンは、無限に広がる3次元空間そのものだと考えてください。この空間の中に、私たちは俳優（オブジェクト）や照明（ライト）を配置して、一つの「場面」を作り上げていきます。

作成方法は非常にシンプルです。

import * as THREE from 'three';

// 新しいシーンを作成
const scene = new THREE.Scene();

この一行で、空っぽの3D空間が用意されました。シーンには背景色を設定したり、霧（フォグ）を追加して遠くのオブジェクトを霞ませたりする機能もあります。

カメラ (Camera) – 3D空間を映す視点

カメラは、広大なシーンの中のどの部分を、どのような画角で切り取るかを決定する「視点」の役割を果たします。カメラがなければ、シーンにどれだけたくさんのオブジェクトを配置しても、それを見る手段がないため何も表示されません。

Three.jsにはいくつかの種類のカメラが用意されていますが、主に使われるのは以下の2つです。

  1. PerspectiveCamera（透視投影カメラ）:
    最も一般的に使われるカメラです。現実世界で私たちが見るのと同じように、遠くにあるものは小さく、近くにあるものは大きく見える「遠近感」を表現します。3Dゲームやリアルなビジュアライゼーションなど、没入感を重視するシーンに適しています。
  2. OrthographicCamera（正投影カメラ）:
    遠近感をなくし、すべてのオブジェクトを距離に関係なく同じ大きさで描画するカメラです。設計図（ブループリント）や、2Dゲームのようなフラットな見た目の表現、UI要素の表示などに使われます。

ここでは、より一般的なPerspectiveCameraの作成方法を見てみましょう。

// PerspectiveCameraを作成
// 引数: (1)画角, (2)アスペクト比, (3)描画開始距離, (4)描画終了距離
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// カメラの位置を設定
camera.position.z = 5; // Z軸方向に5 unidades手前に移動

PerspectiveCameraのコンストラクタは4つの重要な引数を取ります。

  • fov (Field of View): 画角を度数で指定します。数値が小さいほど望遠レンズのように、大きいほど広角レンズのようになります。通常は45〜75度の間が使われます。
  • aspect: アスペクト比（ビューの幅 ÷ 高さ）です。通常はブラウザウィンドウの幅と高さを指定します。これを正しく設定しないと、画像が歪んで表示されます。
  • near: 描画開始距離です。カメラからこの距離より近いオブジェクトは描画されません。
  • far: 描画終了距離です。カメラからこの距離より遠いオブジェクトは描画されません。

nearとfarで定義される範囲は「視錐台（しすいだい）」と呼ばれ、この範囲内にあるオブジェクトだけが描画の対象となります。適切な値を設定することは、パフォーマンスの最適化にも繋がります。

レンダラー (Renderer) – カメラの映像をブラウザに描画するもの

レンダラーは、これまで準備したシーンとカメラの情報を受け取り、実際に計算を行って、それをブラウザの画面上にピクセルとして描画する最終担当者です。Three.jsは内部でWebGLを使ってこの描画処理を行うため、私たちは通常WebGLRendererを使用します。

レンダラーの準備には、いくつかのステップが必要です。

// WebGLRendererを作成
const renderer = new THREE.WebGLRenderer({ antialias: true });

// レンダラーのサイズをウィンドウサイズに設定
renderer.setSize(window.innerWidth, window.innerHeight);

// レンダラーが生成したcanvas要素をHTMLのbodyに追加
document.body.appendChild(renderer.domElement);
  1. インスタンスの作成: new THREE.WebGLRenderer()でレンダラーを作成します。{ antialias: true }というオプションを渡すと、オブジェクトの輪郭が滑らかに（アンチエイリアス処理されて）描画されますが、少しだけパフォーマンスに影響します。
  2. サイズの指定: renderer.setSize()で、描画する領域のサイズ（解像度）を設定します。通常はブラウザのウィンドウサイズに合わせます。
  3. DOMへの追加: レンダラーは内部的にHTMLの<canvas>要素を生成します。このrenderer.domElementを、HTMLのdocument.bodyなど、ページ上の任意の場所に追加することで、描画結果が表示されるようになります。

そして最後に、レンダラーに「描画してください」と命令を出すrenderメソッドを呼び出します。

// シーンとカメラを渡して描画を実行
renderer.render(scene, camera);

この一行が実行された瞬間に、カメラから見たシーンの光景が、指定された<canvas>要素上に映し出されるのです。

簡単な3Dオブジェクトを表示する5ステップ

シーン、カメラ、レンダラーを準備する、3Dオブジェクトの形状（ジオメトリ）を作成する、3Dオブジェクトの見た目（マテリアル）を作成する、形状と見た目を組合せオブジェクトを作成しシーンに追加、レンダラーで描画を実行する

Three.jsの基本3要素である「シーン」「カメラ」「レンダラー」の役割が理解できたところで、いよいよ実際に手を動かして、画面に何かを表示させてみましょう。ここでは、最もシンプルな3Dオブジェクトである「立方体」を、5つのステップに沿って表示するプロセスを解説します。この流れは、あらゆるThree.jsプロジェクトの基本となるものです。

① シーン、カメラ、レンダラーを準備する

最初のステップは、前章で学んだ基本3要素を初期化することです。これがすべての土台となります。

import * as THREE from 'three';

// 1. シーンの作成
const scene = new THREE.Scene();

// 2. カメラの作成
const fov = 75;
const aspect = window.innerWidth / window.innerHeight;
const near = 0.1;
const far = 1000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = 5; // 少し後ろに下げてオブジェクトが見えるようにする

// 3. レンダラーの作成
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

この時点で、空っぽの3D空間を映し出す準備が整いました。まだ何もオブジェクトがないので、画面は真っ黒なままです。

② 3Dオブジェクトの形状（ジオメトリ）を作成する

次に、表示したいオブジェクトの「形」を定義します。Three.jsでは、この形状データをジオメトリ（Geometry）と呼びます。ジオメトリは、オブジェクトを構成する頂点の座標や、それらがどのようにつながって面を形成するかといった情報を持っています。

Three.jsには、基本的な図形を手軽に作成するための、たくさんの組み込みジオメトリが用意されています。

ジオメトリクラス 説明
BoxGeometry 直方体（立方体）
SphereGeometry 球体
PlaneGeometry 平面
CylinderGeometry 円柱
ConeGeometry 円錐
TorusGeometry ドーナツ形状（トーラス）

今回は立方体を作りたいので、BoxGeometryを使用します。

// 形状（ジオメトリ）の作成
// 引数: (幅, 高さ, 奥行き)
const geometry = new THREE.BoxGeometry(1, 1, 1);

これで、幅・高さ・奥行きがそれぞれ1の、立方体の「骨格」がデータとして生成されました。まだ見た目（色や質感）がないため、このままでは表示できません。

③ 3Dオブジェクトの見た目（マテリアル）を作成する

ジオメトリで「形」を定義したら、次はオブジェクトの「表面の見た目」を決めます。これを行うのがマテリアル（Material）です。マテリアルは、オブジェクトの色、質感（光沢があるか、マットか）、透明度、テクスチャ（表面に貼り付ける画像）などを定義します。

マテリアルにも多くの種類がありますが、初心者がまず覚えるべきは以下の2つです。

  • MeshBasicMaterial: 最もシンプルなマテリアル。光源（ライト）の影響を一切受けず、指定した色で均一に塗りつぶされます。デバッグやフラットな表現に適しています。
  • MeshStandardMaterial: 物理ベースレンダリング（PBR）に対応した、よりリアルなマテリアル。金属っぽさ（metalness）や表面の粗さ（roughness）といったパラメータを持ち、シーン内のライトに反応してリアルな陰影を生み出します。これを使う場合は、シーンにライトを設置する必要があります。

今回はまずシンプルに表示させるため、MeshBasicMaterialを使い、色を緑色に設定してみましょう。

// 見た目（マテリアル）の作成
// colorプロパティに16進数の色コードを指定
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

これで、鮮やかな緑色の「表面」が用意できました。

④ 形状と見た目を組み合わせてオブジェクト（メッシュ）を作成し、シーンに追加する

ステップ②で作成した形状（ジオメトリ）と、ステップ③で作成した見た目（マテリアル）を、いよいよ一つに組み合わせます。このジオメトリとマテリアルから構成される、最終的な3DオブジェクトのことをThree.jsではメッシュ（Mesh）と呼びます。

メッシュは、THREE.Meshクラスのコンストラクタに、ジオメトリとマテリアルを渡すことで作成できます。

// メッシュの作成
const cube = new THREE.Mesh(geometry, material);

これで、緑色の立方体オブジェクト（cube）が完成しました。しかし、この時点ではまだメモリ上に存在しているだけで、私たちの3D空間には登場していません。最後に、このメッシュをシーンに追加します。

// メッシュをシーンに追加
scene.add(cube);

scene.add()メソッドを使うことで、オブジェクトが3D空間の原点(0, 0, 0)に配置されます。

⑤ レンダラーで描画を実行する

すべての準備が整いました。シーンには緑色の立方体が一つ配置され、カメラはそれを少し離れた位置から見ています。最後のステップは、レンダラーに「この光景を描画せよ」と命令することです。

// レンダリング（描画）の実行
renderer.render(scene, camera);

このコードが実行されると、ブラウザの画面に、ついに緑色の四角形（真正面から見ているので四角に見えます）が表示されるはずです。おめでとうございます！これがThree.jsで3Dオブジェクトを表示する、最も基本的な一連の流れです。

表現力を高める追加要素

基本的な立方体を表示できるようになったら、次はその表現力をさらに高めていきましょう。ここでは、シーンをよりリアルに見せるための「ライト」と、オブジェクトに命を吹き込む「アニメーション」という、2つの重要な追加要素について解説します。

ライト（光源）を追加して立体感を出す

先ほどの例では、光源の影響を受けないMeshBasicMaterialを使用したため、のっぺりとした緑色の四角形が表示されました。これに立体感を与え、オブジェクトの形状がはっきりと分かるようにするためには、ライト（Light）が必要です。

現実世界と同じように、Three.jsの世界でも光がなければモノの形は認識できません。ライトをシーンに追加し、マテリアルをライトに反応するもの（例: MeshStandardMaterial）に変更することで、オブジェクトに陰影が生まれ、一気にリアルな見た目になります。

Three.jsには様々な種類のライトが用意されています。

ライトの種類 説明 特徴
AmbientLight 環境光 シーン全体を均一に、あらゆる方向から照らす。影はできない。オブジェクトの暗い部分を少し明るくして、真っ黒になるのを防ぐために使われる。
DirectionalLight 平行光源 太陽光のように、非常に遠くの光源から一方向の平行な光が降り注ぐ。影を生成できる。
PointLight 点光源 電球のように、特定の一点から全方向に光を放つ。影を生成できる。
SpotLight スポットライト 懐中電灯や舞台照明のように、特定の方向に向けて円錐状の光を照射する。影を生成できる。

一般的には、シーン全体を優しく照らすAmbientLightと、主要な光と影を生み出すDirectionalLightを組み合わせて使うことが多いです。

それでは、先ほどの立方体の例にライトを追加してみましょう。

// マテリアルをライトに反応するMeshStandardMaterialに変更
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });

// 1. 環境光の追加 (色, 光の強さ)
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

// 2. 平行光源の追加 (色, 光の強さ)
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1); // 光の方向を右上からに設定
scene.add(directionalLight);

このコードを追加して再度renderer.render(scene, camera)を実行すると、立方体に明るい面と暗い面ができ、はっきりと立体として認識できるようになるはずです。ライトとマテリアルの組み合わせを工夫することが、高品質なビジュアルを生み出す鍵となります。

オブジェクトを動かす（アニメーション）

静的なオブジェクトに動きを与えることで、コンテンツは格段に魅力的になります。Three.jsでアニメーションを実現するには、requestAnimationFrameというJavaScriptの標準機能を使った「アニメーションループ」を作成するのが一般的です。

requestAnimationFrameは、ブラウザに「次の再描画のタイミングで、指定した関数を実行してください」とお願いする関数です。この関数を再帰的に（自分自身の中から）呼び出し続けることで、ブラウザの描画フレームレート（通常は毎秒60回）に合わせて、連続的に処理を実行するループ構造を作ることができます。

このループの中で、オブジェクトのプロパティ（位置: position, 回転: rotation, 大きさ: scale）を少しずつ変化させ、最後にrenderer.render()を呼び出すことで、パラパラ漫画の原理で滑らかなアニメーションが実現します。

実際に、先ほどの立方体を回転させるアニメーションを実装してみましょう。

// アニメーションループ関数を定義
function animate() {
  // 次のフレームで再びanimate関数を呼び出すよう予約
  requestAnimationFrame(animate);

  // 立方体をX軸とY軸周りに少しずつ回転させる
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  // 毎フレーム、レンダリングを実行
  renderer.render(scene, camera);
}

// アニメーションループを開始
animate();

これまでのrenderer.render(scene, camera);という一行をこのanimate関数に置き換え、最後にanimate()を一度呼び出すだけで、立方体がその場でクルクルと回転し始めます。

cube.rotation.xやcube.rotation.yの値を変更することで回転速度を調整したり、cube.position.yを変化させて上下に動かしたりと、このループ内で様々な変化を加えることが可能です。ユーザーの入力（マウスの動きなど）に応じてプロパティを変化させれば、インタラクティブなアニメーションも実現できます。このアニメーションループこそが、Three.jsに命を吹き込むための基本パターンです。

Three.jsの学習方法

公式ドキュメントとサンプル、オンラインのチュートリアルサイト、書籍で体系的に学ぶ

Three.jsは奥が深い技術であり、効率的に学習を進めるためには、適切なリソースを活用することが重要です。ここでは、初心者から中級者まで役立つ、代表的な学習方法を3つ紹介します。

公式ドキュメントとサンプル

何よりもまず参照すべきは、公式サイト（threejs.org）が提供する一次情報です。特に「Documentation」と「Examples」のセクションは、学習の過程で何度も訪れることになるでしょう。

  • Documentation (API Reference):
    threejs.org/docs/ にある公式ドキュメントは、Three.jsのすべてのクラス、メソッド、プロパティ、パラメータについて網羅的に解説しています。最初は難しく感じるかもしれませんが、「BoxGeometryにはどんな引数があるのか」「Meshにはどんなプロパティが設定できるのか」といった具体的な疑問が生じた際に、正確な情報を得られる最も信頼性の高い情報源です。英語ですが、ブラウザの翻訳機能を使えば十分に理解できます。
  • Examples:
    threejs.org/examples/ には、Three.jsの機能を活用した膨大な数のデモが、ソースコード付きで公開されています。これはまさに「生きた教科書」です。自分が実現したい表現に近いサンプルを見つけ、画面右下の</>アイコンをクリックしてソースコードを確認し、それを自分のプロジェクトで試してみる、というサイクルを繰り返すことは、最も効果的な学習法の一つです。コードを読み解くことで、ベテラン開発者がどのようなテクニックを使っているのかを学ぶことができます。

公式リソースを使いこなせるようになることが、Three.jsマスターへの近道です。

オンラインのチュートリアルサイト

公式ドキュメントがリファレンス（辞書）であるのに対し、オンラインのチュートリアルサイトや動画教材は、ステップ・バイ・ステップで体系的に学べるコース（教科書）の役割を果たします。

  • 専門的な学習プラットフォーム: Three.jsに特化した有料の学習プラットフォームが存在します。これらは、基礎から応用、シェーダー、パフォーマンス最適化まで、非常に質の高いカリキュラムを動画形式で提供しており、本気でThree.jsを極めたい人にとっては最高の投資となるでしょう。
  • 動画共有サイト (YouTubeなど): YouTubeには、世界中の開発者が投稿した無料のチュートリアル動画が豊富にあります。「Three.js tutorial for beginners」といったキーワードで検索すれば、基本的なセットアップから簡単なプロジェクトの完成までをガイドしてくれる動画が多数見つかります。実際にコードを書いている様子を見ながら学べるため、初心者にとって非常に分かりやすいです。
  • 技術ブログ・記事 (Qiita, Zennなど): 日本語で特定のトピックについて深く解説した記事を探すなら、QiitaやZennといった技術情報共有サービスが役立ちます。「Three.js glTF 読み込み」「Three.js ポストプロセッシング」のように、具体的なキーワードで検索することで、先人たちが残してくれた貴重な知見や、特定の問題に対する解決策を見つけることができます。

これらのリソースを組み合わせ、自分の学習スタイルやレベルに合ったものを選んで活用しましょう。

書籍で体系的に学ぶ

オンラインの情報が断片的で追いにくいと感じる場合や、基礎からじっくりと腰を据えて学びたい場合には、書籍が非常に有効な選択肢となります。

書籍で学ぶメリットは、専門家である著者が、初心者がつまずきやすいポイントを考慮しながら、学習に最適な順序で情報を体系的に整理してくれている点です。3Dグラフィックスの基本的な理論から、Three.jsのAPIの使い方、そして実践的なサンプルアプリケーションの開発まで、一貫した流れで知識をインプットできます。

Three.jsに関する書籍は、国内外でいくつか出版されています。選ぶ際には、以下の点に注意すると良いでしょう。

  • 出版年月日: Three.jsは活発にアップデートされているため、情報が古すぎないかを確認しましょう。ただし、基本的なコンセプトは変わらないため、数年前の書籍でも基礎を学ぶ上では十分に役立ちます。
  • 対象読者レベル: 「入門者向け」「初心者から中級者向け」など、自分の現在のスキルレベルに合った書籍を選びましょう。
  • サンプルコード: 書籍で解説されているサンプルコードがダウンロード可能かどうかは重要なポイントです。実際に手を動かしながら読み進めることで、理解が格段に深まります。

オフラインでじっくりと自分のペースで学びたい人にとって、一冊の良書は最高のガイドとなってくれるはずです。

Three.jsを拡張する便利なライブラリ

React Three Fiber (r3f)、A-Frame、Cannon-es (物理エンジン)

Three.jsは単体でも非常に強力ですが、そのエコシステムには、開発をさらに効率化し、表現の幅を広げるための便利なライブラリが数多く存在します。ここでは、Three.jsと組み合わせて使われる代表的なライブラリを3つ紹介します。

React Three Fiber (r3f)

React Three Fiber（通称: r3f）は、人気のJavaScriptライブラリであるReactを使って、Three.jsのシーンを宣言的に構築するためのレンダラーです。React開発に慣れている人にとっては、Three.jsを学ぶ上で非常に強力な選択肢となります。

通常のThree.js（Vanilla JS）では、scene.add(mesh)のように命令的なコードを書きますが、r3fでは、Three.jsのオブジェクトをReactコンポーネントとして記述します。

React Three Fiberのコード例:

import { Canvas } from '@react-three/fiber'

function App() {
  return (
    <Canvas>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <mesh>
        <boxGeometry args={[1, 1, 1]} />
        <meshStandardMaterial color="orange" />
      </mesh>
    </Canvas>
  )
}

このように、HTMLを書くような感覚で3Dシーンを構築できるのがr3fの最大の特徴です。Reactのコンポーネント志向、状態管理、フックといったエコシステムの恩恵をフルに活用しながら3D開発が行えるため、複雑なインタラクションを持つアプリケーションの構築が容易になります。dreiというヘルパーライブラリと組み合わせることで、カメラ制御やテキスト表示などもコンポーネントとして手軽に実装できます。

A-Frame

A-Frameは、VR/ARコンテンツ制作を主眼に置いた、HTMLベースのWebVRフレームワークです。内部的にThree.jsを使用していますが、それをさらに抽象化し、HTMLのカスタムタグを書くだけで3DやVRのシーンを構築できるように設計されています。

A-Frameのコード例:

<a-scene>
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

このように、JavaScriptをほとんど書かなくても、直感的なHTMLタグでシーンを記述できるため、プログラミング経験が少ないデザイナーやアーティストでも手軽にVRコンテンツ制作を始めることができます。もちろん、JavaScriptを使ってより複雑なインタラクションを追加することも可能です。WebXRへの対応も組み込まれており、VRコンテンツ開発の入門として最適なフレームワークの一つです。

Cannon-es (物理エンジン)

「Three.jsでできること」のセクションでも触れましたが、Cannon-esは、Three.jsと組み合わせて使われる代表的な3D物理演算エンジンです。フォーク元のCannon.jsの開発が停滞しているのに対し、Cannon-esはコミュニティによって活発にメンテナンスされています。

これを利用することで、Three.jsで作成したオブジェクトに、重力、衝突判定、摩擦、反発といった物理的な性質を与えることができます。

使い方の基本は、Three.jsのメッシュ（見た目）と対になるCannon-esのボディ（物理的な実体）を作成し、アニメーションループの中で両者の位置と回転を常に同期させることです。これにより、ユーザーがオブジェクトを投げたり、オブジェクト同士がぶつかってリアルに跳ね返ったりといった、インタラクティブでダイナミックな体験を作り出すことができます。ゲームやシミュレーション、物理法則を可視化するような教育コンテンツの開発に不可欠なライブラリです。

まとめ

この記事では、Web上で3D表現を可能にするJavaScriptライブラリ「Three.js」について、その基本概念から具体的な使い方、学習方法、そしてエコシステムに至るまで、幅広く解説してきました。

最後に、重要なポイントを振り返りましょう。

  • Three.jsは、複雑なWebGLをラップし、Webブラウザ上で3Dグラフィックスを簡単に扱うための高レベルなライブラリです。
  • 3Dモデルの描画、アニメーション、物理演算、VR/ARコンテンツ作成など、その可能性は多岐にわたります。
  • 学習には3D特有の概念の理解が必要ですが、豊富なドキュメントと活発なコミュニティがその挑戦をサポートしてくれます。
  • すべての基本は「シーン」「カメラ」「レンダラー」の3要素にあり、オブジェクトは「ジオメトリ（形状）」と「マテリアル（見た目）」を組み合わせた「メッシュ」として作成されます。
  • ライトを追加することで立体感が生まれ、アニメーションループを実装することでオブジェクトに命が吹き込まれます。
  • React Three FiberやA-Frame、Cannon-esといった周辺ライブラリを活用することで、開発はさらに効率的かつ高度になります。

Three.jsは、単なる技術的なツールではありません。それは、Webという開かれたプラットフォームの上で、開発者やクリエイターが自らのアイデアを三次元空間に解き放ち、ユーザーにこれまでにない新しい体験を届けるための、創造的なキャンバスです。

学習の道のりは平坦ではないかもしれませんが、小さな立方体を一つ表示させることから始まる旅は、やがてあなただけのインタラクティブな3Dの世界を創り出す力へと繋がっていくはずです。この記事をきっかけに、ぜひThree.jsの魅力的な世界に足を踏み入れ、次世代のWeb表現の担い手を目指してみてください。