随滚动旋转的 3D 玻璃瓶产品页(React Three Fiber)

GPT-6 Astra 做出 WebGL 产品网站:滚动时玻璃瓶旋转,青柠色标题与碎片从旁掠过,玻璃反射由 GLSL 着色器实现。

Claude Code + Three.js(仅代码)Wandy 2
真实模型 · 360°两者都基于同一张照片:左边是 Claude Code(Opus 5.5)用 Three.js 代码建模的一次未经修改的运行结果;右边是 Wandy 2。

创建精细的 3D 模型

单靠代码只能做出简单的形状。Wandy 2 能用一张照片生成带纹理的 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. 滚动测试后,让它优化玻璃质感、旋转节奏或移动端性能。

原帖你是作者吗? 请联系我们修改或删除此页面