ボクセル鉄道ジオラマ:港・機関庫・昼夜切替を操作できるThree.js作品

GPT-6 AstraがThree.jsで走らせて遊べる鉄道模型を制作。蒸気機関車、クレーンのある港、操作パネル、夜モードを自由な角度から楽しめます。

Claude Code + Three.js(コードのみ)Wandy 2
実際のモデル · 360°どちらも同じ写真から作成:左は Claude Code(Opus 5.5)が Three.js のコードでモデリングした、手を加えていない1回分の実行結果。右は Wandy 2。

精細な3Dモデルを作ろう

コードだけでは単純な形しか作れません。Wandy 2なら写真1枚から、同じシーンで使えるテクスチャ付き3Dモデルを作れます。

Wandy3Dによる制作ブリーフ

作者がプロンプトを公開していないため、この作品を再現する方法を私たちがまとめました。

Build an interactive voxel model-railway table in Three.js, delivered as one self-contained HTML page. Place a wooden table with a green landscape board in a bright room with a window and shelves. On the board lay looping tracks, sidings, a roundhouse with turntable, a small town of red-roofed houses, trees, a station platform and a harbor with a crane and boats. Run steam locomotives with passenger and freight cars along the rails. Add a dark-green control panel with buttons to start and stop trains, switch between auto and manual modes, adjust speed, and toggle a day and night lighting mode with lit windows. Support orbit, pan and zoom so the viewer can inspect tiny details, and show a small title caption on load. Use a soft, toy-like palette of greens, warm wood and cream walls. Done means trains move smoothly, controls respond, and the scene runs at a steady frame rate.

このプロンプトの使い方

  1. コーディングツールのGPT-6 Astraにビルドブリーフを貼り、Three.jsの単一HTMLを依頼します。

  2. 線路配置、町の名前、車両、部屋の雰囲気、色を変えたり、操作ボタンを追加します。

  3. ページを開いて周囲を回し操作を試し、線路や列車、照明の追加を依頼して改良します。

元の投稿作者の方ですか? このページの修正・削除をご依頼ください