スクロールで回転するガラス瓶の3D商品ページ(React Three Fiber)

GPT-6 AstraがWebGLの商品サイトを制作。スクロールでガラス瓶が回り、ライム色の見出しと破片が流れ、GLSLでガラスの反射を表現します。

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 scroll-driven 3D product landing page for a fictional herbal liqueur using React Three Fiber, Three.js, Tailwind CSS and Framer Motion. Centre a glossy dark glass bottle with a printed label on a near-black background with thin frame lines. The bottle should rotate through a full turn as the visitor scrolls, with glass reflections and refraction created by custom GLSL shaders. Surround it with floating acid-lime shards. Overlay very large condensed headlines, alternating solid lime and outlined white, that slide past and interlock with the bottle, plus small captions with tasting notes and a pill-shaped order button. Keep the palette to black, lime and white. Deliver a React project that runs in the browser and stays smooth on mobile. Done when scrolling drives the bottle rotation and text transitions without stutter and the glass looks convincingly reflective.

このプロンプトの使い方

  1. コーディングツールでGPT-6 Astraにビルドブリーフを渡し、React Three Fiberのプロジェクトを依頼します。

  2. 商品、ラベル、配色、見出しの文言を自分のブランドと味の説明に差し替えます。

  3. スクロールで確認し、ガラスの質感、回転のタイミング、モバイル最適化を依頼します。

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