Three.jsの基本3要素｜Scene・Camera・Rendererを図で理解する

2026年8月1日 2026年8月1日約7分

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

前回のThree.jsの環境構築｜Vite + npmで最速セットアップで、色のついた箱がくるくる回るところまでやりました。コピペで動いたと思いますが、こう思いませんでしたか？

「で、このコードって結局なにをしてるの？」

今回はそこを回収します。Three.jsの一番の土台になるScene・Camera・Rendererという3つの要素。これさえ腹落ちすれば、あとの応用は全部この上に乗るだけです。

Table of Contents

Toggle

3Dは「撮影現場」だと思うとラク

いきなりコードを読むと難しく感じますが、Three.jsの3要素は現実の撮影現場とまったく同じ構造をしています。

Scene（シーン） … 物を並べる舞台・撮影現場
Camera（カメラ） … その舞台を撮るカメラマンの視点
Renderer（レンダラー） … 撮った映像を1枚の絵に焼く現像係

舞台に物を置いて、カメラで狙って、現像して画面に映す。前回のコードは、まさにこれを順番にやっていただけなんです。1つずつ見ていきます。

① Scene（シーン）＝物を置く舞台

まずは舞台を用意します。

const scene = new THREE.Scene();

これだけ。まだ何もない、真っ暗な空間です。ここに物を「登場させる」にはadd()を使います。

scene.add(cube); // 舞台に箱を1つ置く

前回のコードで箱が映ったのは、このscene.add(cube)で舞台に立たせていたからです。逆に言うと、addし忘れた物はどれだけ作っても画面には出てきません（初心者がよくハマるポイントです）。

Sceneは「表示したい物を全部ぶら下げておく入れ物」くらいの理解でOKです。

② Camera（カメラ）＝どこから見るかの視点

次に、その舞台を撮るカメラを置きます。前回はこう書きました。

const camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 1000);
camera.position.z = 3;

PerspectiveCameraは、遠くの物ほど小さく見える遠近感のあるカメラです（人間の目に近い見え方）。4つの引数は、そのままカメラのレンズ設定だと思ってください。

引数	値	意味
fov	75	画角。広いほど広角レンズ（たくさん写る）
aspect	幅 / 高さ	画面の縦横比。歪ませないために合わせる
near	0.1	これより手前は写らない
far	1000	これより奥は写らない

そしてcamera.position.z = 3。これはカメラを手前に3だけ引いたという意味です。カメラの初期位置は原点(0,0,0)で、箱も原点にあるので、引いてやらないと箱の中にカメラがめり込んで何も見えません。「一歩下がって全体を撮る」イメージです。

③ Renderer（レンダラー）＝絵に焼いて画面に貼る

最後に現像係です。

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

WebGLRendererは、SceneとCameraの情報をもとに実際の1枚の絵（canvas）を描く担当です。antialias: trueはフチのギザギザを滑らかにするオプション。

setSize() … 描く絵のサイズを画面いっぱいに
renderer.domElement … Rendererが持っているcanvas要素そのもの。これをappendChildでページに貼ることで、はじめて画面に表示されます

つまりRendererは「舞台とカメラを受け取って、canvasに現像して、ページに貼る」までを一手に引き受けています。

3つの関係は、この一行に集約される

ここまで来ると、前回のコードのこの一行の意味がわかります。

renderer.render(scene, camera);

これは日本語にすると 「この舞台（scene）を、このカメラ（camera）で撮って、絵にして」 という命令です。3要素がここで初めて手をつなぎます。

 Scene（舞台）┐
              ├─→ renderer.render() ─→ canvas（画面）
Camera（視点）┘

Three.jsのプログラムは、突きつめると「Sceneに物を置いて、Cameraで狙って、Rendererでrenderする」の繰り返しでしかありません。ここが背骨です。

アニメーションの正体はパラパラ漫画

前回、箱が「回り続けて」いたのはなぜでしょう。答えはこのループです。

renderer.setAnimationLoop(() => {
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
});

setAnimationLoopは、毎フレーム（だいたい1秒に60回）中の処理を呼び続けてくれる仕組みです。毎回ちょっとだけ箱を回して → renderし直す。これを高速で繰り返すから、動いて見える。要はパラパラ漫画と同じ原理です。

「1コマ描く」のがrender()、「それを描き続ける」のがsetAnimationLoop、と分けて覚えると混乱しません。

まとめ

Three.jsは Scene（舞台）/ Camera（視点）/ Renderer（現像係） の3要素が土台
物はscene.add()しないと映らない。カメラはpositionで引かないと中に埋まる
renderer.render(scene, camera) = 「この舞台をこのカメラで撮って」の一行がすべての中心
アニメーションは、そのrenderを毎フレーム呼び続けているだけ

この3要素は、これから先どんなに複雑な表現を作っても絶対に土台であり続けます。ここが腹落ちしていれば、あとは置くモノと見た目を増やしていくフェーズです。

箱の色や質感を変えたくなったら → [マテリアル・テクスチャ・ライティング入門（A3）]
見た目を自分でイチから書きたくなったら → GLSL入門（B1）
全体のロードマップは → Three.js入門ガイド

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

この記事のような「仕組みを理解しながら小さく動かす」を積み重ねて、作品づくりまで導くKindle本を書きました。
『Three.jsでつくる、小さなWebGL表現 ── はじめての”作品づくり”ガイド』
Scene・Camera・Rendererの基礎から、自分の作品をつくるところまで順を追って解説しています。

👉 Amazonで見る »

僕もXでThree.jsの作品や知見を発信しているので、よかったら@shun_webdesignを覗いてもらえると嬉しいです。それでは、よいThree.jsライフを🌊