歴代大統領で変化するオーバルオフィスのThree.jsインタラクティブ

Claude Fable 5.1が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 Three.js web app that shows how the Oval Office looked under different U.S. presidents. Start with a top-down cutaway view of the round room floating on a soft light-grey background, with a stylised, slightly toy-like look: cream walls, tall windows with drapes, a carpet, a desk, sofas, armchairs, lamps, flags and potted plants. Add a bottom bar of small thumbnail cards, one per presidency, and a small text panel at the top left with a short description of the selected era. Selecting a card swaps the carpet, drapes, furniture and decor to match that period with a smooth transition. Include view modes so the user can switch between the overhead cutaway and a first-person style camera that glides inside the room toward the desk, the fireplace with a portrait above it, and the ceiling seal. Use orbit-style mouse controls. Deliver a single web project that runs in the browser. Done when every era loads, the camera moves smoothly, and the room differences are clearly visible.

このプロンプトの使い方

  1. コーディングツールのClaude Fable 5.1にビルドブリーフを貼り、Three.jsプロジェクトを依頼します。

  2. 部屋を図書館やオフィスなど別の場所に変え、時代カードと説明文も差し替えます。

  3. 実行後、切り替え演出やカメラ経路、家具の細部を一つずつ指示して改善します。

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