Three.js 程序化生成的两台蒸汽机车,带爆炸分解与复原动画

GPT-6 Astra 编写 TypeScript,在运行时生成两列火车,无需模型文件,车轮与零件分解动画均由代码驱动。

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

创建精细的 3D 模型

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

Wandy3D 制作说明

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

Build an interactive browser showcase of two steam locomotives, one classic and one streamlined, using TypeScript and Three.js with no external 3D model files. Generate every part at runtime from dimensions, profiles and geometry helper functions: boiler, cab, wheels, rods, tender and rails. Use a clean light interface with a serif headline, a small panel for travel speed, view buttons and a play toggle. Animate the wheels and the trains rolling along the track, with a speed slider. Add an explode and reassemble animation that separates all parts in the air and puts them back together, driven entirely by code. Allow orbiting the camera around the trains with soft shadows on a pale ground. Done means smooth performance in the browser and recognizable, detailed locomotives.

如何使用这条提示词

  1. 在配置好 TypeScript 与 Three.js 项目的编码智能体中,把构建简述交给 GPT-6 Astra。

  2. 把机车换成其他对象(如发动机或钟表),并调整速度控制。

  3. 在浏览器中运行,再要求增加零件细节、镜头运动或带标注的分解图。

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