Three.jsで作る層分解チーズケーキの3D解説ムービーとレシピカード

Claude Fable 5.1で、手作りチーズケーキの写真が層ごとに分解するThree.js 3Dモデルとコード製レシピカードになる1分の映像を制作。

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 one-minute explainer film that turns a photo of a home-baked cheesecake into a layered 3D model and a recipe. Open on the photo in a clean off-white frame, then show a chat-style message from the baker and short annotation labels pointing at features of the cake. Next, construct a real Three.js scene of the cake as separate layers: springform pan, parchment above the rim, cake body, crust, sweetener dusting and a ring of halved berries. Let the layers separate and reassemble while the camera orbits, first as a wireframe on a bold magenta background, then as a neutral grey model. Cut to a photoreal rendered shot of the finished cake. Build all on-screen text, such as the chat screens, annotations and a two-page recipe card with ingredients and seven method steps, as an HTML page captured in a browser, so the text stays crisp. Finish with a plain title card. Add a synthesised score. Deliver the scene code, the HTML pages and the final cut.

このプロンプトの使い方

  1. Three.jsとHTMLを書けるコーディングエージェントで、Claude Fable 5.1にビルドブリーフを渡します。

  2. ケーキを自分の料理や製品に替え、実際の層構造と文言、言語を指定します。

  3. シーンをレンダリングし、HTML画面をブラウザで撮影。修正はカットごとに依頼します。

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