雨夜水面上的小幽灵:Opus 5.5 写代码、GPT 6 Astra 做设计的布料着色器
出自 OpenDrama 创作百科
一只白布小幽灵提着一盏灯,站在下雨的黑色水面上,远处一排暖色光斑。Chetan Ankola 的 28 秒视频里,设计出自 GPT 6 Astra,Three.js 代码由 Claude Opus 5.5 写,浏览器就能跑。他自己点了两处:布料着色器「还不错」,水面沿用上一期作品。
怎么做的
- 01GPT 6 Astra角色和画面设计
- 02Opus 5.5Three.js 代码
- 03布料顶点动画
- 04互动点、拉、拖
- 角色极简:一块圆顶白布、两只黑眼睛、一点腮红,没有腿。
- 布料是重点:衣摆和两只「袖子」随动作摆动,飞起时向后甩。
- 屏幕底部写着五个操作:点幽灵、拉衣摆、拖瓶子、点瓶塞、点水面。
- 水面是上一期的复用:细碎高光、雨点,远处光斑倒映在水里。
关键细节
- 一盏灯撑起全场:瓶灯是唯一的暖光,照亮幽灵一侧,其余全是冷黑。
- 背景只用光斑:远处一排虚化的光点交代了「岸」,不用建模。
- 有灯、没灯两种状态:有的画面瓶灯是暗的,幽灵一下变成冷灰。我们推测是点瓶塞开关灯。

容易翻车的地方
- 布料太软会像果冻:摆幅要随离顶部的距离变大,头顶几乎不动。
- 全黑场景容易一团糊,要留住水面高光和雨丝的亮点。

自己动手
用 Three.js 场景起手提示词 搭好雨夜和水面,再按 Three.js 电影感画面 安排一盏主光和光斑[1]。
参考资料
- Chetan Ankola 的原帖 x.com/chetanankola/status/2110225806849122363
标签:#Three.js#着色器#氛围编程#布光#GPT#WebGL
本文由 OpenDrama 编辑根据公开帖子撰写。文中画面为评论需要从原视频中引用,工具、参数和步骤为我们的复盘还原;原作一切权利归原作者所有,如需撤图请联系我们。
本篇用到的技能和提示词
3D分类下的更多词条
查看全部 →一条提示词背后:Argon 多智能体在 Blender 建日本寺院
Gemini 4 Argon 在 Antigravity 里凭一条提示词,在 Blender 建出带五重塔的日本寺院。拆开这条提示词:技能文档、蓝图、Nano Banana 参考图、四个专家子智能体和一个评审。
同一句提示词,Gemini 4 Argon 搭出达·芬奇发明工坊
maxescu 在 Antigravity 里重跑 @techhalla 比拼 Gemini 4 Argon 与 Opus 5.5 的原提示词,得到四件机械的交互博物馆。拆它的场景组织,以及为什么每个模型只跑一次说明不了什么。
Blender MCP 建造规则提示词
贴给 Blender MCP 智能体的项目提示词:单位、栅格、命名、从参考图提炼的风格规则、可重跑的代码、固定机位渲染自查,另附参考图转规则和检查员两段配套提示词。
用 Blender MCP 让 AI 智能体搭场景
让编程智能体通过 MCP 操作 Blender:安装接通、给建造规则和参考图、用固定机位渲染自查、多智能体分工,以及让场景保持可编辑。
Blender 到网页:面向 Three.js 和 Unity 的 glTF 资产管线
把 Blender 场景导成又小又快的 GLB 放进网页游戏:手机与桌面的面数和 Draw Call 预算、烘焙、贴图尺寸、Draco/Meshopt/KTX2 取舍、命名、碰撞体和 LOD。
图生 3D 做游戏资产:从概念图到可用模型
把一张概念图变成能直接进引擎的 3D 模型:输入图规则、候选挑选、减面与重拓扑预算、UV 与贴图修复、比例轴心和导出格式,每一步都给具体数字。

