用語集 › 💻 プログラミング › Three.js（スリージェイエス）
【スリージェイエス】

Three.js（スリージェイエス） とは？

💡 Webに3Dの魔法をかける、JavaScript界の3Dエンジン
📌 このページのポイント
Three.js 主要コンポーネント Scene（舞台） Mesh 形状 + 見た目 Geometry Material Light 照明・影の設定 Ambient Light Directional Light Camera 視点・画角の設定 Renderer WebGL / WebGPU 画面に描画 🖥️ 🎭 役者・セット 💡 照明 映画撮影のように3Dシーンを構成する
Three.jsの主要コンポーネント（Scene/Camera/Renderer/Mesh）
ひよこ ひよこ

Three.jsって何がすごいの？

ペンギン先生 ペンギン先生

本来3DをWebに表示するにはWebGLという低レベルなAPIを使う必要があるんだけど、それは行列計算やシェーダーの知識が必要でかなり大変なんだ。Three.jsはそれを全部隠してくれて、「箱を置く」「光を当てる」みたいな直感的なコードで3Dが作れるんだよ

ひよこ ひよこ

どんなものが作れるの？

ペンギン先生 ペンギン先生

製品の3Dビューワー、建築物のウォークスルー、データの3D可視化、ブラウザゲーム…かなり幅広いよ。有名なところだとGitHubのホームページの地球儀や、Googleの一部プロジェクトでも使われているんだ

ひよこ ひよこ

Scene・Camera・Rendererって何？

ペンギン先生 ペンギン先生

映画撮影に例えるとわかりやすいよ。Sceneは撮影スタジオで、3Dオブジェクトや照明を置く場所。Cameraはどの角度から見るかを決めるカメラ。Rendererはそれを実際に映像として画面に描き出す映写機、という役割分担だね

ひよこ ひよこ

おもしろい！Reactと一緒に使えるの？

ペンギン先生 ペンギン先生

react-three-fiber（R3F）というライブラリを使えば、Reactのコンポーネントとして3Dオブジェクトを書けるんだ。状態管理やアニメーションもReactの流儀で扱えるから、Reactに慣れた開発者にはとても使いやすいよ

ひよこ ひよこ

WebGPU時代になってもThree.jsは使えるの？

ペンギン先生 ペンギン先生

Three.jsはすでにWebGPURendererを実験的にサポートしていて、WebGPU時代にもシームレスに移行できるように進化しているよ。裏側のレンダリングエンジンが変わっても、開発者のコードはほぼそのまま動くのがライブラリの強みだね

ペンギン
まとめ：ざっくりこれだけ覚えればOK！
「Three.js」って出てきたら「JavaScriptで3Dグラフィックスを手軽に作れるライブラリ」と思えればだいたいOK！
📖 おまけ：英語の意味
「Three.js」 ＝ 3DのためのJavaScriptライブラリ
💬 名前の「Three」は3Dの「3」から来ているよ。「.js」はJavaScriptのファイル拡張子で、JavaScriptのライブラリであることを示しているんだ
🔗 あわせて読みたい
← 用語集にもどる