Three.js入門｜ブラウザで動く3D表現を作る完全ガイド

2026年6月27日 2026年6月27日約8分

みなさんこんにちは。フロントエンドエンジニアのしゅん（@shun_webdesign）です。

僕は普段、Three.jsを使ってブラウザで動く3D表現を作っていて、その作品をXでも発信しています。最初は「3Dってなんか難しそう…」と尻込みしていたんですが、触ってみると思っていたより手軽に、ブラウザだけでリッチな表現が作れることに驚きました。

この記事は、そんなThree.jsの入門の入口になる完全ガイドです。Three.jsとは何か、何が作れるのか、基本の仕組み、そして「どういう順番で学べばいいか」までをまとめました。個別のトピックは別記事に分けているので、ここをハブにして気になるところから読み進めてもらえればと思います。

Table of Contents

Toggle

Three.jsとは

Three.js（公式サイト）は、ブラウザで3D表現を作るためのJavaScriptライブラリです。

ブラウザでGPUを使った描画をするには、本来「WebGL」や「WebGPU」という低レベルな仕組みを直接さわる必要があります。でもこれをそのまま書くのはかなり大変。Three.jsは、その難しい部分をラップして、「カメラを置いて、モノを置いて、描画する」くらいの感覚で3Dを書けるようにしてくれます。

つまりThree.jsは、3D表現とWeb制作のあいだの「翻訳者」みたいな存在ですね。

Three.jsで何が作れる？

ざっくり挙げるとこんな感じです。

プロダクト・ブランドサイトの没入感ある演出（スクロールで動く3D）
ポートフォリオサイトの作り込み（僕も作りました → 後述）
ミニゲームやインタラクティブ作品
ジェネラティブアート / ビジュアル表現

最近はAwwwardsのような受賞サイトの多くがThree.jsやWebGPUで作られていて、「Webでここまでできるの？」という表現が当たり前になってきています。Webデザインの幅を一段広げてくれるのがThree.jsです。

Three.jsの基本構造（3つの要素）

Three.jsの世界は、ざっくり3つの登場人物で成り立っています。

Scene（シーン） … 3Dの世界そのもの。ここにモノを置いていく
Camera（カメラ） … その世界をどこから見るか
Renderer（レンダラー） … 世界をブラウザに描き出す係

これに「Mesh（メッシュ）＝置くモノ」を足すと、もう最小の3Dが動きます。実際に箱を1つ回してみるコードがこちらです。

import * as THREE from "three";

// 1. シーン・カメラ・レンダラー
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 1000);
camera.position.z = 3;

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

// 2. 箱（メッシュ）を置く
const cube = new THREE.Mesh(
  new THREE.BoxGeometry(),
  new THREE.MeshNormalMaterial()
);
scene.add(cube);

// 3. 毎フレーム描画する
renderer.setAnimationLoop(() => {
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
});

これだけで、色のついた箱がくるくる回ります。「世界を作って、カメラで見て、毎フレーム描く」——この型さえつかめば、あとは置くモノを増やしたり、見た目を変えたりしていくだけです。

※ 細かいAPIはバージョンで変わることがあります。実際に書くときはthree.js公式のサンプル集を見るのが一番の近道です。

学習ロードマップ（このガイドの歩き方）

ここからは、どの順番で学ぶと迷子になりにくいかという道順です。それぞれ詳しい記事に分けているので、リンクから深掘りできます。

基礎をつかむ

環境構築（Vite + npmで最速セットアップ）
基本3要素（Scene / Camera / Renderer）を理解する
マテリアル・テクスチャ・ライティングで見た目を作る
3Dモデル（GLTF）を読み込む

シェーダーで表現を広げる（ここが面白い）

GLSL入門（自作シェーダーの第一歩）
TSLとは？WebGPU時代の新しいシェーダーの書き方
Three.jsでWebGPUを使う（WebGPURenderer移行）

ReactでThree.jsを書く（React Three Fiber）

React Three Fiber入門
実例：Next.jsとReact Three Fiberのポートフォリオを公開するまでの裏側（公開済み）

応用・作例

スクロール連動の3D演出（Three.js × GSAP）
パフォーマンス最適化
かっこいい作例・学べるサイトまとめ

補足：今はまだ準備中のリンクがありますが、順次公開して埋めていきます。まずは STEP 1 から、手を動かしながら進めるのがおすすめです。

📕 もっと手を動かして体系的に学びたい人へ

この記事で触れた基礎を、実際に「小さな作品」を作りながら順を追って学べるKindle本を書きました。
『Three.jsでつくる、小さなWebGL表現 ── はじめての”作品づくり”ガイド』
入門から「自分の作品をつくる」ところまで、つまずきやすいポイントを丁寧に解説しています。

👉 Amazonで見る »

これからのThree.js：WebGPU/TSLの時代へ

最後に、いま学び始める人に知っておいてほしい流れを一つ。

2026年に入って、WebGPUが主要ブラウザすべてで標準搭載になりました。これはWebGLの後継にあたる仕組みで、Three.jsもすでに対応しています。それに合わせて、シェーダーを書くための新しい仕組み TSL（Three.js Shading Language） も登場しました。

つまり今は、Three.jsが「WebGLの時代」から「WebGPUの時代」へ移り変わっているタイミング。日本語の情報がまだ少ない領域なので、今から学ぶ人ほど先行者になれる面白いフェーズだと僕は思っています。このブログでも、TSL/WebGPU周りは重点的に書いていく予定です。