平面ロゴをカーソルに反応する3Dマスコットにしたアニメーション

GPT-6 Astraで、とげとげの平面ロゴが待機・思考・喜びの状態を持つ3Dキャラクターになり、LP用の線画版も作られました。

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 animated 3D version of a flat 2D mascot logo as a web page. The mascot is a spiky, bright red blob with two oval eyes and a small mouth, on a dark charcoal background. Give it named emotional states such as idle, thinking and happy, shown as a caption under the character, and make it follow and react to the cursor. Add subtle idle motion, a state with a faceted 3D look where the spikes turn into angular shards, and a wireframe line-art variant that can sit as a background accent on a landing page. Include a small control to switch between characters or states. Keep the palette limited to red, charcoal and off-white. Done when the transitions between states are smooth, the 3D form clearly matches the original logo silhouette, and the mascot works embedded in a page.

このプロンプトの使い方

  1. コーディングツールのGPT-6 Astraにビルドブリーフを渡し、自分のロゴ画像を添付します。

  2. マスコットの形、色、感情名をブランドのキャラクターに合わせて置き換えます。

  3. ブラウザで確認し、遷移の滑らかさや線画版のサイト埋め込みをAstraに調整させます。

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