Interactive 3D Slime

它是什么

这是一份分章节的教程，带你用 Codex + GPT-6、Three.js 和原生 WebGPU 把一个可揉捏的 3D 果冻史莱姆做成真正的浏览器玩具。它是一个货真价实的 3D 场景——有网格、灯光、物理材质和相机——而不是把图片贴到画布上：两只黑色豆豆眼和一张小嘴锚定在同一网格的正面上，按压、向上拖动、松手时会跟着身体一起形变。

成品页面把暖白色舞台和一块控制面板配在一起，面板提供五套配色、软硬、阻尼、大小（65%–115%）以及一个"戳一下"按钮。文末附有完整的提示词，每章一段，方便逐段复制。

核心价值主张

这份教程的卖点是"捏感是真的"：一套轻量弹簧模型驱动一张连续网格，所以表情和高光会随表面一起移动，而不是浮在表面滑动。

• 一张连续的果冻网格：用 Marching Cubes 把圆顶基元与底部若干椭球平滑融合，得到柔软铺开、又有真实体积与曲率的底座。
• 贴合面部的五官：眼睛和嘴从同一几何体的正面投影生成，与身体共用同一套 deform() 形变和法线更新。
• 只走 WebGPU 的半透明：MeshPhysicalNodeMaterial 配合 TSL 节点，叠加吸收色、厚度、低粗糙度和影棚反射，再用 640 个实例化微气泡营造内部层次。
• 可复用的提示词集：五段章节提示词——目标与视觉稿、页面与渲染入口、网格与半透明、交互与物理、打包交付——可以逐段喂给 Codex。

它可能替代谁

当前现实与局限

• WebGPU 是硬性门槛：没有 WebGL 回退，且刻意关闭了 Three.js 的自动降级，不支持的浏览器只会看到报错，控件也会被禁用。
• 锁定版本：构建锁定 Three.js 0.180.0 / r180，并用到内部属性（_getFallback、backend.isWebGPUBackend），因此升级版本可能让后端断言失效。
• 偏向桌面端：基准测试在 M4 Pro、990×720 画布上完成，移动端与低端 GPU 未做评估。

结论

首要建议

对想在浏览器里做出真正会形变的 3D 玩具、并想参考"锁定原生 WebGPU、而非悄悄回退 WebGL"的开发者来说，这是一个很好的模板。

开发生命周期与迭代循环

整个构建遵循教程所教的那套循环：先定一张参考视觉稿，再逐章交给 Codex，把结果与视觉稿对照，然后迭代。先形后质——先定网格与五官，再处理透射着色与气泡。

指标与变现

v0.8 的基准测试记录于 M4 Pro / 48 GB、Headless Chrome 152 / Metal 3、1440×1000 视口、990×720 画布、DPR 1：空闲 10.02 秒内 59.40 FPS，持续交互 13.50 秒内 59.26 FPS，P95 帧时间 16.8 毫秒。

没有任何变现：教程免费分发，完整提示词也一并附上供复用。

关键取舍与可复现性

它刻意坚持只走 WebGPU。Three.js 标准的 WebGPURenderer 会悄悄回退到 WebGL 2，所以教程在初始化后核对类名并断言 renderer.backend.isWebGPUBackend；设备不可用时就给出说明，而不是降级运行。这是一个明确的取舍：用更窄的设备覆盖面，换取真正的原生渲染和更干净的着色器代码。

可复现性正是这套格式的意义：五段提示词按顺序排列，整个构建可以逐章重放，而参考视觉稿为每一步提供了固定的视觉对照目标。

完整提示词

按顺序逐章把提示词喂给 Codex。Prompt 01 生成的视觉稿是后续每一章的校准基准。

Prompt 01 · 目标与视觉稿

请用 Three.js 和原生 WebGPU 在当前项目里做一个可交互的 3D 史莱姆网页。严禁 WebGL 回退或自动降级。

先产出一张整页概念视觉稿，把图片和生成提示词一起保存下来，等我确认后再开始实现。（如果没有图像工具，就用我给的目标参考图。）
页面布局需要干净的暖白背景、加粗的中文标题"捏捏，放轻松。"，以及副标题"一团软乎乎，接住你的无聊。"。
左侧：一只半透明的薄荷绿果冻史莱姆，圆顶、饱满铺开的底座、内部细密气泡、影棚灯带和细微的接触阴影。两只黑色小豆豆眼和一张嘴紧贴正面表面。
右侧：一块圆角控制面板，提供颜色、软硬、阻尼、大小选项，以及一个"戳一下"按钮。留白充足，不杂乱。

最终角色必须支持局部捏压、向上拖动、松手回弹和轻柔落地，五官随表面无缝形变。目标 60 FPS，完成后在真实硬件上验证。

Prompt 02 · 页面与渲染入口

基于选定的视觉稿做出可运行的网页。使用暖白背景 #F8F6F3、加粗排版、左侧 3D 画布舞台、右侧控制面板（移动端/窄屏时移到下方）。
把项目清晰地拆成独立文件：页面布局、网格生成、软体物理、WebGPU 初始化。保留参考设计，不要用把图片贴到画布上的方式伪造 3D。

锁定并本地打包 Three.js 0.180.0 / r180。申请原生 WebGPU 设备，关闭这个版本自带的 WebGL 自动回退机制，并在渲染器初始化后验证当前生效的后端。
如果用到内部属性，要显式写明版本约束。
若 WebGPU 不可用、初始化失败或上下文丢失，向用户显示说明、禁用控件并停止执行循环。

起一个本地服务器，给出本地 URL，并在真实浏览器里确认场景能干净加载、且没有创建 WebGL 上下文。

Prompt 03 · 网格、五官与半透明

按目标参考构建一张平滑连续的 3D 果冻网格，确保圆润的圆顶、柔软饱满的底座和足够的体积纵深。不要用标准刚体球替代。
生成锚定在正面表面坐标上的眼睛和嘴，与身体共用完全相同的形变逻辑和法线更新，以保持面部高光平滑连续。

实现兼容 WebGPU 的物理透射材质，结合吸收色、厚度贴图、低粗糙度和柔和的环境反射，做出发光的青绿果冻。用实例化网格控制内部微气泡的开销。
利用局部静止坐标让底座更清澈透亮，使各区域在拉伸和拖动时保持稳定。

锁定相机、视口、底色和大小，截取一张真实浏览器截图，把轮廓、体积和半透明与参考图对比，再打磨细节。

Prompt 04 · 交互与物理调校

实现局部压缩、拖动、弹性回弹和轻微的地面碰撞。确保身体、五官和高光共用同一条形变管线，以固定时间步更新一套轻量的弹簧-阻尼-重力系统。
实现 5 套预设颜色、软硬、阻尼、65%–115% 缩放，以及一个"戳一下"动作。缩放操作必须同步更新射线命中的坐标映射。
优雅处理指针取消、失焦和快速输入，避免拖拽状态卡死或元素飞出视野。

在初始资源准备阶段加入一个轻柔呼吸的果冻加载动画，待 GPU 完成首帧开销后平滑过渡，再开放用户操作。尊重 'prefers-reduced-motion' 设置。

彻底测试交互、配色变化、边界缩放值、移动端视图和错误状态。做性能剖析并报告持续 FPS（空闲与交互两种情况），记录设备规格、浏览器版本、视口尺寸、DPR、采样时长，以及任何 95 分位帧掉落。

Prompt 05 · 复现与打包

整理并校验这个 3D 史莱姆项目，使其能在其他环境中可靠复现。

把 index.html、样式、src/ 源码、本地 vendor 依赖和许可证打包成一个完整的 ZIP，并附上一份不含绝对路径的 README。
写明前置条件、本地启动命令、URL、端口占用的解决办法和干净的退出流程，并强调 WebGPU 的硬性要求。
直接从解压后的压缩包做一次干净环境运行，确认零缺失依赖。

录一段简短的浏览器屏幕录制，演示按压、拖动、掉落、换色和戳一下的交互。
附上初始参考图与当前 WebGPU 渲染的并排对比，标注视觉差异与实测性能指标。
提供在线演示 URL、下载链接，并把可复用的章节提示词按顺序插入文档。