フレームワークを整える
中級Three.js を整える。
＝ Scene・Camera・Renderer を組んで回す——3D をブラウザだけで WebGL 描画
サンプルコード（クリックでエディタに挿入）
JS EDITOR (ESM) three 0.185.1
Ctrl/⌘ + Enter で実行
PREVIEW
CONSOLE
「▶ 実行」を押すとここにログが出ます。
このページについて
- ライブラリは
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の「#」以降に入るためサーバーには送信されません。リンクを開くと同じ状態を復元します。
