【入門】Three.jsで始める3Dウェブ開発 - ブラウザに広がる立体世界への第一歩

Posted at 2026-07-15

「ウェブサイトに動きのある3Dモデルを埋め込みたい」「ポートフォリオサイトをもっとインタラクティブにして差別化したい」——そう思ったことはありませんか？

近年、Apple社の製品紹介ページや自動車メーカーのコンフィギュレーターなど、ブラウザ上で滑らかに動作する3D表現を目にする機会が急増しています。「かっこいいけど、自分にはハードルが高そう...」と感じている方も多いのではないでしょうか。

実は、その多くが Three.js というJavaScriptライブラリで実現されています。WebGLの複雑な仕組みを直接学ばなくても、比較的シンプルなコードで3D表現ができるのがThree.jsの最大の魅力です。

この記事では、Three.jsの基本概念から、実際にブラウザで回転する3Dキューブを表示するところまでを、コード付きで丁寧に解説します。読み終わる頃には「意外と自分でも書けるかも」と感じていただけるはずです。

Three.jsとは？なぜ選ばれるのか

Three.js は、Mr.doob氏によって開発されたオープンソースの3DグラフィックスJavaScriptライブラリです。ブラウザ上で3Dコンテンツを描画するためのWebGL APIを、より扱いやすい形でラップしてくれます。

Three.jsが人気の理由

抽象化されたAPI: 生のWebGLはシェーダーや行列計算など専門知識が必要ですが、Three.jsは直感的なオブジェクト指向のAPIを提供します
豊富なドキュメントとコミュニティ: 世界中で使われており、情報が充実しています
幅広い用途: ゲーム、プロダクトビジュアライゼーション、データビジュアライゼーション、VR/ARなど活用シーンが多彩
エコシステム: GLTFローダー、物理エンジン連携、ポストプロセッシングなど拡張機能が豊富

3Dシーンを構成する3つの必須要素

Three.jsで何かを描画するには、必ず以下の3つの要素が必要です。これは映画撮影に例えるとわかりやすいです。

要素	役割	撮影に例えると
Scene（シーン）	3Dオブジェクトを配置する空間	撮影スタジオ
Camera（カメラ）	どの視点から見るかを決める	カメラそのもの
Renderer（レンダラー）	実際に画面に描画する	フィルム／ディスプレイ

この3点セットさえ理解できれば、Three.jsの世界の8割は掌握したと言っても過言ではありません。

環境構築：まずは動かしてみよう

方法1：CDNで手軽に試す

学習初期はCDN経由が最も手軽です。HTMLファイル1枚で始められます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>My First Three.js</title>
  <style>
    body { margin: 0; overflow: hidden; }
  </style>
</head>
<body>
  <script type="importmap">
    {
      "imports": {
        "three": "https://unpkg.com/three@0.160.0/build/three.module.js"
      }
    }
  </script>
  <script type="module" src="./main.js"></script>
</body>
</html>

方法2：npm + Viteで本格開発

本格的に開発するならビルドツールの利用がおすすめです。

npm create vite@latest my-three-app -- --template vanilla
cd my-three-app
npm install three
npm run dev

実践：回転する3Dキューブを表示する

それでは、実際にコードを書いてみましょう。以下は「シーン」「カメラ」「レンダラー」の3点セットを使い、緑色のキューブを回転させる最小サンプルです。

import * as THREE from 'three';

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

// 2. カメラの作成（透視投影カメラ）
// 引数: 視野角, アスペクト比, near, far
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.z = 5;

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

// 4. メッシュ = ジオメトリ（形状） + マテリアル（材質）
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff88 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 5. ライトを追加（MeshStandardMaterialには光源が必要）
const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 5, 5);
scene.add(directionalLight);

// 6. アニメーションループ
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

// 7. リサイズ対応
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

コードのポイント解説

Mesh（メッシュ） は「Geometry（形状）」と「Material（材質）」を組み合わせて作られます
MeshStandardMaterial は物理ベースレンダリング（PBR）を採用しており、リアルな質感表現が可能ですが、ライトを必ず配置する必要があります（初心者がハマりやすいポイント）
requestAnimationFrame を使うことで、ブラウザに最適化された滑らかなアニメーションが実現できます
リサイズイベントを忘れるとウィンドウサイズ変更時に描画が崩れます

次のステップに進むためのキーワード集

基本を理解したら、以下のキーワードで検索するとさらに世界が広がります。

OrbitControls: マウスでカメラを自由に動かせるようにする補助機能
GLTFLoader: BlenderなどでモデリングしたモデルをThree.jsに読み込む
Texture: 画像を貼り付けて質感をリアルにする
Raycaster: 3D空間内のオブジェクトをクリック判定する
Shader: GLSLを使った独自の表現
Post Processing: ブルームや被写界深度などの映像後処理

まとめ

この記事では、Three.jsの基本を以下の流れで学びました。

Three.jsとは何か — WebGLをラップした3DグラフィックスJSライブラリ
3つの必須要素 — Scene、Camera、Rendererの役割
環境構築 — CDNとVite、それぞれの始め方
実践コード — 回転する3Dキューブを描画する最小サンプル
次に学ぶキーワード — Controls、Loader、Shaderなど

たった数十行のコードで3Dが動くという体験は、ウェブ開発の可能性を大きく広げてくれます。まずは今回のサンプルを自分の手で動かし、色や形、回転速度を変えてみてください。「動く」ことを実感できれば、学習のモチベーションは一気に高まります。

さらに体系的に学びたい方へ

Three.jsは奥が深く、ライト、シャドウ、テクスチャ、マテリアル、アニメーション、カスタムシェーダーなど、独学で全体像を掴もうとすると情報が散らばっていて時間がかかりがちです。「点」で得た知識を「線」でつなげたい方には、体系立ったカリキュラムでの学習が近道になります。

もし「実際に手を動かしながら網羅的に習得したい」という方は、以下の講座が参考になるかもしれません。

📚 Three.js実践講座：基礎から応用まで100演習で完全習得 - 3Dウェブ開発入門

こちらは 100個の演習 を通じて、今回紹介した基礎から一歩踏み込んだ実践的なテクニックまでを、手を動かしながら学べる構成になっています。「読むだけ」「見るだけ」ではなく実際にコードを書いて理解を深めたい方や、ポートフォリオ用の作品を作りながら学びたい方にとって、選択肢の1つとして検討してみる価値があると思います。

もちろん公式ドキュメントやMDNの情報も非常に充実していますので、まずは今回のサンプルコードをカスタマイズすることから始めるのもおすすめです。あなたのスタイルに合った学び方で、ぜひ3Dウェブ開発の世界を楽しんでください。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up