带悬停发光效果的交互式 3D 角色卡片界面

Claude Fable 5.1 做出深色页面,三张玻璃质感卡片分别展示机器人、法师和兜帽人物,悬停时会亮起。

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

创建精细的 3D 模型

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

Wandy3D 制作说明

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

Build an interactive web page with three character cards in a dark, cinematic style. Show a bold heading about three worlds waiting to be explored, with a short line of text beneath. Below it, place three glassy cards side by side, each with its own 3D character on a glowing pedestal: a friendly white robot, a purple wizard with a staff, and a hooded figure with a signboard in a reddish palette. Give each card its own accent colour, a name, a short description and an enter button. On hover, the card lifts, its glow strengthens, the character rotates or animates, and the other cards dim slightly. Follow the cursor with subtle parallax. Use Three.js or React Three Fiber for the characters, keep everything in a single page and make it responsive. Done when hover transitions feel smooth, each card has a distinct mood, and the characters render crisply.

如何使用这条提示词

  1. 在编程工具中把设计简述交给 Claude Fable 5.1,要求生成含 3D 角色的单页。

  2. 把三个角色、强调色和卡片文案换成你自己的游戏、品牌或作品集内容。

  3. 测试悬停与光标效果,再让它加入点击跳转页面、音效或移动端布局。

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