滚动驱动的 3D 工作室网站:玻璃丝带与漂浮卡片

GPT-6 Astra 根据一张参考图用 Three.js 做出工作室网站:滚动时漂浮卡片与玻璃环依次穿过三种色调。

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

创建精细的 3D 模型

单靠代码只能做出简单的形状。Wandy 2 能用一张照片生成带纹理的 3D 模型,直接用在同一个场景里。

Wandy3D 制作说明

作者没有公开提示词,因此我们写下了复现这个作品的方法。

Build a smooth scroll-driven portfolio website for a design studio using Three.js, translating a supplied reference image into a real-time 3D scene. Open with a bold red hero where a translucent, glassy ribbon ring circles several floating white and black cards carrying short slogans, with large outlined headline lettering behind them. As the visitor scrolls, the background fades from red to grey to near-black, the cards fly into an organised grid titled selected work, and the camera finally turns the ring edge-on for a closing call-to-action screen with big white type and a contact line. Use a minimal top navigation, small monospace captions, handwritten blue accent notes and a custom cursor. Deliver one web project that runs in the browser. Done when scrolling drives every camera and object transition smoothly with no jumps, and the layout matches the reference mood.

如何使用这条提示词

  1. 在编程工具里给 GPT-6 Astra 附上参考图和构建简报,并指定使用 Three.js。

  2. 把标语、卡片内容、配色和结尾行动文案换成你自己工作室的信息。

  3. 滚动预览后,让它调整缓动、时间节奏或增加板块,直到过渡顺滑。

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