【スリージェイエス】
Three.js（スリージェイエス） とは？
最終更新:
💡 Webに3Dの魔法をかける、JavaScript界の3Dエンジン
WebGLやWebGPUを使って、ブラウザ上に3Dグラフィックスを表示するためのJavaScriptライブラリ。GPUを扱う低レベルな処理を抽象化し、短いコードで3Dシーンを作成できる。
📌 このページのポイント
ひよこ Three.jsって何がすごいの？
ペンギン先生 ひよこ どんなものが作れるの？
ペンギン先生 ひよこ Scene・Camera・Rendererって何？
ペンギン先生 映画撮影に例えるとわかりやすいよ。Sceneは撮影スタジオで、3Dオブジェクトや照明を置く場所。Cameraはどの角度から見るかを決めるカメラ。Rendererはそれを実際に映像として画面に描き出す映写機、という役割分担だね
ひよこ おもしろい！Reactと一緒に使えるの？
ペンギン先生 ひよこ WebGPU時代になってもThree.jsは使えるの？
もっと詳しく知りたい人へ
今からThree.jsを始めるならWebGLRendererとWebGPURendererのどちらを使う？
公式マニュアルはWebGPURendererを「まだ実験的な段階」と説明していて、アプリや場面によっては機能が足りなかったり、WebGLRendererの方が速かったりする場合があるとしているよ。既存の作例や独自シェーダー（ShaderMaterial、onBeforeCompile）を使うならWebGLRenderer、WebGPUの新機能やTSL（Three Shader Language）で書くならWebGPURendererを試す、というように使う機能で選ぶのが安全だね。WebGPURendererを使うときはimport元を「three/webgpu」に変える必要があるよ。
まとめ：ざっくりこれだけ覚えればOK！
「Three.js」って出てきたら「JavaScriptで3Dグラフィックスを手軽に作れるライブラリ」と思えればだいたいOK！
📖 おまけ：英語の意味
「Three.js」 ＝ 3DのためのJavaScriptライブラリ
💬 名前の由来を説明した公式の記述は見当たらないけど、「Three」は3D（three-dimensional）の「3」と読むのが自然だね。「.js」はJavaScriptのファイル拡張子で、JavaScriptのライブラリであることを示しているんだ