GPT-6 Astra作者:Kai

Three.js製3Dグローブのダッシュボード、フライト経路・2D/3D切替・昼夜モード付き

GPT-6 Astraが1枚の参考スクリーンショットから、経路マーカー、2D表示、昼夜切替を備えたガラス調のThree.jsグローブUIを再現しました。

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

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

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

Wandy3Dによる制作ブリーフ

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

Build a logistics dashboard web page with an interactive 3D Earth globe in Three.js, recreated from a reference screenshot. Use a deep navy background, a large centered Global View title, glass-style panels, yellow accent buttons and clean sans-serif type. Place a textured globe in the center with day and night lighting, atmosphere glow and flight route arcs with labelled markers that animate. Add a left icon sidebar, a statistics column on the right, a zoom control, and a toggle between 3D globe and a flat 2D map view. Include a day and night mode switch, an activities table with a risk panel that slides up from the bottom, and a welcome dialog with three short steps. Done means the layout, lighting and depth closely match the reference and both views work in the browser.

このプロンプトの使い方

  1. Webプロジェクトを実行できるエージェントで、参考スクリーンショットとビルドブリーフをGPT-6 Astraに渡します。

  2. 参考画像を自分のダッシュボード案に差し替え、ラベルや色、アクセントを変えます。

  3. 参考と見比べ、照明や余白、2D表示の修正を追加で依頼します。

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