デッキ構築・アリーナ・VFXラボ付きのThree.jsカードゲーム

GPT-6 AstraがWebGPU対応のカードゲームの基本ループを一通り実装。パック購入、デッキ構築、対戦、報酬獲得まで備えています。

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 trading card game framework for the browser with Three.js and WebGPU. Cover the full core loop: a shop to buy decks and booster packs, a deck builder, a battle arena and a reward screen after matches. Include a card editor with a live card preview, fields for stats and art, and a colour picker. The arena is a dark, sci-fi board with lanes where cards are placed, life totals for both players, a card detail popup and an attack action log. Add a VFX lab with a 3D grid where effects such as projectiles and shields can be previewed and tuned with sliders. Use a dark UI with cyan and magenta accents. Use simple placeholder meshes and effects that can be swapped for custom assets later. Deliver a runnable web project. Done means you can buy a pack, build a deck, play a battle against an opponent and receive a reward.

このプロンプトの使い方

  1. 空のThree.jsプロジェクトで、コーディングツール上のGPT-6 Astraにビルド指示を貼り付けます。

  2. カードのテーマ、ルール、勢力、UI配色を自作に変え、最初は仮メッシュのままにします。

  3. 実行して一巡プレイし、カード絵や新エフェクト、バランス調整を依頼します。

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