フレームワークを整える
中級Three.js を整える。
＝ Scene・Camera・Renderer を組んで回す——3D をブラウザだけで WebGL 描画
Three.js が初めての方は、先に そもそも Three.js とは・どんな場面で使うか をどうぞ。
サンプルコード（クリックでエディタに挿入）
コンソール
「▶ 実行」を押すとここにログが出ます。
そもそも Three.js とは
ブラウザの中に、立体（3D）を置いて動かすための定番ライブラリ。
Three.js は、ブラウザで 3D グラフィックスを扱うための JavaScript ライブラリです。ブラウザの 3D 描画機能である WebGL は、そのままだと書く量が非常に多いのですが、Three.js を使うと「シーン・カメラ・ライト・立体」を並べる感覚で3D 空間を組み立てられます。
Ricardo Cabello 氏（mrdoob）が始めたオープンソースで、現在も多くの人が開発に参加しています。ゲーム向けの機能を一式そろえた Phaser と違い、3D を描くための土台に近い位置づけです。
どこで・どんな場面で使うか
-
商品の3D表示
家具・車・時計などを、回して眺められるようにして見せる用途で使われます。
-
インタラクティブな Web 演出
スクロールやマウスに合わせて立体が動く、企業や作品のサイトで見かけます。
-
3D の地図・データの可視化
建物や地形、数値を立体の形にして表現する場面で使われます。
-
教育・展示・バーチャル空間
部屋や展示物を3D で見せるといった、体験型のコンテンツに使われます。
-
3D の基本を学ぶとき
座標・カメラ・光といった考え方を、動かしながら理解できます。
向いている場面・向いていない場面
- 向いている：ブラウザだけで立体を見せたいとき。アプリを入れてもらわなくても、URL を開くだけで見せられます。
- 向いている：3D の動きを自分で細かく作りたいとき。カメラ・光・素材を自由に調整できます。
- 向いていない：2D の図やグラフで足りるとき。平面で足りるなら、p5.js や Chart.js のほうが手軽で、読む人にも伝わりやすくなります。
上の練習場でサンプルを動かし、数字を変えて、立体の向きや色がどう変わるか試してみてください。
このページについて
- ライブラリは
cdn.jsdelivr.netから読み込みます（ESM のimport）。書いたコードと実行結果は端末内で完結し、外部へ送信しません（送信ゼロ）。 - プレビューはサンドボックス化した iframe で、このページや端末のデータには触れません。
- 「停止」は iframe を破棄して作り直します。requestAnimationFrame で回り続けるサンプルが多いので、書き換える前に一度「停止」を押すか、そのまま「▶ 実行」で作り直してください。
- ④「マウスで回転」はプレビュー内をドラッグでカメラ回転、ホイールでズームできます（OrbitControls）。
このツールについて
Three.js は Scene・Camera・Renderer を組み合わせて3D空間を作るライブラリです。requestAnimationFrame のループで毎フレーム描き直すことで、回転や光の当たり方が動いて見えます。
左にコード、右に 3D プレビュー。Three.js の Scene/Camera/Renderer を書き換えて、回る立方体・ライト・複数オブジェクト・マウス回転を試せます。
主な機能
- 4サンプル（回る立方体・ライトと材質・複数オブジェクト・OrbitControls）
- iframe 内で ESM import をそのまま実行・importmap でベア指定子を解決
- 左エディタ／右プレビュー＋console・停止ボタン
- three は cdn.jsdelivr.net から初回のみ・送信ゼロ
よくある質問
Q. マウスでカメラを回せますか？
A. 「マウスで回転」のサンプルは OrbitControls 対応で、プレビュー内をドラッグで回転、ホイールでズームできます。
Q. importmap は何のためにありますか？
A. OrbitControls.js が内部で three という名前だけの import を使うため、ブラウザが解決できるように three を CDN の URL に対応付けています。
Q. 回転が止まらず重くなってきました。
A. 「■ 停止」で iframe を破棄すれば描画ループも止まります。書き換えて「▶ 実行」すれば作り直されます。
入力値はURLの「#」以降に入るためサーバーには送信されません。リンクを開くと同じ状態を復元します。
