Three.js 虫子在照片上爬行:逆向运动学腿部与鼠标交互

GPT-6 Astra 生成了浏览器演示:六足甲虫在人像照片上行走,可显示落脚点、调数量,并有追逐与躲避模式。

在线演示源代码

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 demo in Three.js where many small beetles crawl across the surface of a portrait photo. Each beetle has a glossy red body and six thin legs. Legs move in two alternating groups: one group stays planted while the other lifts and steps to a new target, with two-segment inverse kinematics placing each foot. Beetles sample the photo's height or contour so their bodies follow the curved surface and tilt with it. Use a dark green background and a clean card-style interface in a modern typeface. Add a toggle that shows foot landing points, a slider for beetle count and walking speed, a pause button, and a mouse mode switch between wandering, chasing the cursor and fleeing from it. Include short explanatory panels about the gait and leg solving. Deliver it as a static page that can be hosted on GitHub Pages. Done when dozens of beetles walk smoothly without legs jumping.

如何使用这条提示词

  1. 在你的编程工具中把构建说明交给 GPT-6 Astra,要求生成静态 Three.js 页面。

  2. 替换照片、生物外形、颜色、腿数或步态,并调整数量与速度范围。

  3. 本地或用 GitHub Pages 打开,再让模型优化步伐、增加鼠标行为或更多表面。

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