GPT-6.1 Sol 实测：3 个 Web 3D 案例，它能不能接替 Astra？
适合谁
- 想知道 GPT-6.1 Sol 在前端动效和 Web 3D 上到底是什么水平的前端 / 独立开发者
- 要做产品 3D 展示、接单建站，想先用它出个原型的人
- 手里有 Plus 或更高套餐，想搞清楚这类任务会吃掉多少 Codex 额度的人
怎么做
- 先打开文中三个在线 Demo，看效果是不是你要的水平
- 挑一个最接近自己需求的场景，复制对应小节的 Prompt 原样跑一遍
- 想在自己电脑上复现同样的环境，按 CLIProxyAPI 教程把 Codex 会员接进 Claude Code
- 跑之前对照 Codex 额度表，给这类任务留出足够的 5 小时配额
注意事项
- 文中额度数据来自 Plus 套餐实测，不同套餐、不同模型的 5 小时配额并不相同
- 三个案例都是单文件 HTML，能跑起来不等于能直接上线，商用前自己过一遍代码
- Prompt 里的视觉描述写得越具体成品越稳，照抄不如按自己的场景改
作者：UPGPTs 团队·首次发布：2026-10-06·最后更新：2026-10-26
TL;DR： 我在 Claude Code 里用 GPT-6.1 Sol（
gpt-6.1-sol）连跑了三个高难度 Web 3D 场景——西瓜果冻软体物理、3D 赛博木鱼、花店爆炸拆解。三个案例都跑出了能直接打开的成品，全是单文件 HTML、零外部依赖、开箱即跑。软体受力回弹、Web Audio 原生合成音频、3D 场景的空间连续性，这三件过去最容易翻车的事，它都稳住了。三个 Demo 的在线地址、完整可复制 Prompt，以及 Plus 套餐下的真实额度账单，都在下面。
关键词：GPT-6.1 Sol 实测、GPT-6.1 Sol 前端、GPT-6.1 Sol 和 Astra 区别、Three.js 单文件 HTML、AI 写前端动效
适合人群：想在项目里用 GPT-6.1 Sol 做前端动效 / Web 3D 的开发者，和纠结要不要为它升级套餐的人。
三个案例速览
| 案例 | 考验什么 | 在线 Demo | Prompt |
|---|---|---|---|
| 西瓜果冻「捏捏乐」 | 软体物理：2D 质点弹簧系统、网格形变、阻尼回弹 | 打开 Demo | 跳到案例一 |
| 3D 赛博木鱼 | 光影与音频：Three.js 复杂光影、Web Audio 原生合成 | 打开 Demo | 跳到案例二 |
| 花店爆炸拆解 | 空间连续性：多层级构件管理、逆向动画 | 打开 Demo | 跳到案例三 |
观看建议：三个 Demo 都是桌面浏览器体验，第一个记得动手拖，后两个记得开声音。
📚 本文目录（点击跳转）
- 测试环境：这三个案例是怎么跑出来的
- 案例一：西瓜果冻捏捏乐（软体物理）
- 案例二：3D 赛博木鱼（原生音频合成）
- 案例三：花店爆炸拆解（空间连续性）
- 三个案例放在一起看
- 这次实测没测什么
- 成本：三个案例吃掉多少额度
- 结论：GPT-6.1 Sol 到底什么水准
- 常见问题
测试环境：这三个案例是怎么跑出来的
先说清楚环境，免得你复现的时候对不上号。
- 模型：
gpt-6.1-sol（不是 Astra，也不是 GPT-6 Sol） - 客户端：Claude Code，不是 Codex App
- 额度：消耗的是 ChatGPT Plus 套餐里 Codex 会员的额度
- 项目结构：三个案例各建一个目录，每个目录里只有一个
index.html
为什么要在 Claude Code 里跑？因为我平时的工作流就在 Claude Code 上，而通过开源工具 CLIProxyAPI，可以把 Codex 会员无损转成本地 API Key 接进来——用自己习惯的客户端，吃 Codex 的额度，不用额外买 API。
下面三个案例，全部按同一个要求跑：单文件 HTML、零外部依赖、开箱即跑。
案例一：西瓜果冻捏捏乐（软体物理）
考验维度：2D 质点弹簧系统、网格形变、果冻阻尼回弹。
我想验证什么
用大模型写 Web 动效，最让人头疼的是「塑料感」：你让它做个形变，它多半给你套几个生硬的 CSS scale，或者几段贝塞尔曲线糊过去——看着在动，但没有重量。
所以这次我不给它留后路，直接把强度拉满：用纯数学算法和网格系统，写一块晶莹剔透、能用鼠标任意揉捏拉扯、还带阻尼回弹的西瓜果冻。
我提的要求（可直接复制）
请生成一个可运行的单文件 HTML 网页，实现一个极度逼真、Q弹解压的“西瓜果冻捏捏乐”交互动效。
技术与物理实现要求：
1. 【视觉呈现】：
- 画面中央是一块切好的西瓜片：红润晶莹的半透明果肉（带果冻光泽的高光与微小气泡）、几颗散落的黑西瓜籽、底部由浅白过渡到翠绿的西瓜皮。
- 整体渲染要呈现半透明胶质果冻质感（Subsurface scattering 视觉效果，柔和阴影）。
2. 【核心软体物理机制】：
- 基于质点-弹簧系统（Mass-Spring System）或 2D 软体物理（Verlet Integration），果肉由数十个互联的控制点网格构成。
- 支持鼠标（或触摸）交互：
- 鼠标可在西瓜任意位置按住并往外拖拽，果肉会随着拉扯产生拉伸、变薄的弹性形变；
- 松开鼠标按键后，果肉产生高频、阻尼衰减的果冻抖动（Duang~Duang 回弹），并平滑复原；
- 鼠标快速滑过时，西瓜表面也会泛起水波般的微小涟漪果冻震颤。
3. 【交互体验】：界面干净纯粹，无任何杂质 UI，配上浅灰马卡龙背景，让用户第一眼就产生“想捏一下”的冲动。代码自包含在一个 HTML 内。
它做出来的东西
在线试玩：打开西瓜果冻捏捏乐 Demo
扯住果肉往外拉，它会像真的胶质软糖一样被拉长、变薄；松手那一瞬间，整块果肉以极高的频率抖几下，Duang~Duang~ 地弹回原样。
做到了什么
- 真的手搓了一套物理系统。 它没有偷懒去引现成的物理库，而是自己搭了一个互联质点弹簧网格（Verlet 积分）。不管你从角上扯还是从中间捏，受力点的凹陷和周围果肉的牵拉都对得上，有流体那种绵密的手感。
- 材质的光学细节没糊弄。 半透明胶质的高光、底部由白到翠绿的瓜皮过渡层、果肉里的微小气泡，它都渲染出来了。
没做到的
当时 Prompt 里我没写音效需求，所以这一版是无声的——这是我提需求时漏了，不是模型的锅。想要声音，直接搬案例二的做法即可。
这一轮的结论：软体物理这块，它交出来的是成品，不是演示。
案例二：3D 赛博木鱼（原生音频合成）
考验维度：Three.js 复杂光影、Web Audio API 原生音频合成、微交互节奏。
我想验证什么
如果说做西瓜是「自娱自乐」，这个案例就是照着商业爆款的路子打的。年轻人现在最需要的是解压、是情绪出口，「敲木鱼」这类解压小工具火过不止一轮，需求是被验证过的。
所以我让 GPT-6.1 Sol 做一个能在网页端挂机运行的「3D 沉浸式赛博功德神殿」：不光要 3D 建模，还得有物理震颤、冲击波粒子，以及不依赖任何外链音频、纯靠浏览器原生算出来的空灵木鱼声。
我提的要求（可直接复制）
请编写一个极具质感、可在浏览器直接运行的单文件 index.html “3D 赛博木鱼 · 沉浸式解压功德神殿”。使用 HTML5 + Three.js (cdnjs) + GSAP (cdnjs) + Web Audio API。
核心效果与交互要求：
1. 【3D 木鱼与场景】：
- 画面中心是一个精细的 3D 悬浮木质木鱼（紫檀木质感，带有微弱的高光倒角和阴影）。
- 背景为禅意暗黑科技风（深空渐变，点缀漂浮的微弱金色香火粒子流）。
2. 【打击动效与物理反馈】：
- 监听鼠标点击（或按空格键）：
- 木鱼本体产生强烈的瞬时受力下沉与 Q 弹阻尼回弹动效（配合 GSAP）。
- 每次敲击，敲击点爆发出金色光环涟漪（Shockwave）与金色星芒粒子。
- 从木鱼上方升起半透明发光的立体金色小字：“功德 +1”、“烦恼 -1”、“薪资 +10000”（随机轮换），带有向上漂浮并逐渐透明消散的物理动效。
3. 【音效生成（原生免外链）】：
- 使用 Web Audio API 原生合成极其空灵、清脆沉厚的“笃、笃”木鱼敲击敲打音，带有柔和的混响（Reverb）余音。
4. 【界面 UI】：
- 顶部有一个现代微发光的“功德累计计数器”，字体极具极简设计感。
- 右下角提供一个【自动打坐摸鱼】开关，开启后以每秒 1 次的禅意节奏自动敲击，适合打工人放在副屏挂机。
代码单文件自包含，开箱即敲。
它做出来的东西
在线试玩（记得开声音）：打开 3D 赛博木鱼 Demo
深邃的暗黑禅意空间里，一尊泛着温润紫檀木光泽的木鱼悬浮在半空。敲下去的瞬间，木鱼受力下沉再回弹，一圈金色光环冲击波扩散开来，伴随一声极清脆悠扬的「笃」；屏幕上方飘起金光小字「功德 +1」「烦恼 -1」。右下角还配了一个【自动打坐摸鱼】开关。
做到了什么
- 音频是现场合成出来的。 它没有去网上乱找那种经常 404 的外部 mp3，而是直接用振荡器（Oscillator）+ 增益节点（GainNode）现场合成了木质打击音和衰减余音——用的是 Web Audio API 的原生能力，不依赖任何外链。
- 打击有节奏感。 配合 GSAP 的缓动曲线，敲下去那一下是干脆的受力，回弹时带一点木质震颤，不拖泥带水。
- 商业完整度够。 从功德计数器、粒子消散算法到全屏自适应，代码逻辑闭环相当严密，套个壳就能当独立小程序上线。
这一轮的结论：声音本来是这类 Demo 最容易翻车的部分，它反而是完成度最高的一环。
上班敲一天，功德圆满，烦恼全消。
案例三：花店爆炸拆解（空间连续性）
考验维度：全局空间连续性、多层级构件管理、逆向运动学动画。
我想验证什么
前两个案例如果算「惊艳」，第三个就是硬骨头。
在 3D 工业可视化和建筑预演里，最难的一项技术叫爆炸图拆解（Exploded View）。过去哪怕换 Astra 来做，也很容易翻车：部件飞着飞着出了屏幕、前后穿模，或者干脆只给你一个外立面，里面全是空壳。
我给 GPT-6.1 Sol 提的要求很严苛：搭一栋温馨的双层小花店，不但要有完整的屋顶和玻璃外墙，内部还得配齐收银台、花架、盆栽，甚至最深处的那张小床；然后写动画，让所有构件悬浮平移拆散，再严丝合缝地拼回原貌。
看结果之前，我已经做好了翻车的准备。
我提的要求（可直接复制）
请使用 Three.js 在一个单文件 HTML 内构建一个精致的双层“温馨花店”3D 场景，并实现完整的结构爆炸拆解动画（Exploded View）。
要求：
1. 【场景建模（纯代码程序化搭建）】：
- 屋顶、四面墙体（前墙带有透明玻璃大橱窗与店门）、地板。
- 重点是【内部细节绝不偷工减料】：花店内部必须包含一个木质前台收银台、多层阶梯花架、各类高低不同的花瓶盆栽，以及最深处一角一张铺有碎花被褥的小床。
- 色调搭配温暖清爽（薄荷绿墙面、暖木质家具、丰富花卉色彩）。
2. 【爆炸拆解动画机制】：
- 页面右下角放置一个控制面板：“一键拆解 / 组装”按钮，或者一个进度滑块（0% ~ 100%）。
- 点击拆解时：屋顶垂直向上平滑飞升悬浮；四面墙壁分别朝前后左右四个方向向外平移展开；花架、收银台向外扩散；最内部的小床和小花瓶保持在中心。所有构件平滑向外悬浮解构，将内部构造 360 度无死角展示给用户。
- 点击组装时：所有部件沿着完全相反的轨迹，严丝合缝地逆向拼装回原貌。
3. 【渲染质感】：使用 OrbitControls 允许鼠标自由旋转缩放视角；设置柔和的半球光（HemisphereLight）与投射阴影的平行光（DirectionalLight），具有柔和的黏土/微缩模型风格。
它做出来的东西
在线试玩：打开花店爆炸拆解 Demo
点下拆解按钮，整座花店像被施了魔法：房顶垂直升空，四面墙带着大落地玻璃向外徐徐展开，花架和柜台向两侧散开……整栋房子的内部构造瞬间纤毫毕现。再点组装，所有部件逆向平滑归位，严丝合缝，没有穿模。
做到了什么
- 没有偷懒的「空间记忆力」。 四面墙退散之后，你会发现它真的老老实实把房间最角落那张小床建出来了——被褥的褶皱感、床头柜的位置，全都在正确的相对坐标上。它没有因为默认视角看不到，就把内部建模省掉。
- 运动轨迹是算出来的，不是凑出来的。 拆解按法线方向平移，重组能精确回到原点。这说明它对三维场景的层级树（Scene Graph）和局部坐标系（Local Coordinates）的理解相当精确。
这一轮的结论：这种水准意味着，在电商产品 3D 拆解展示、交互式课件、数字孪生原型这类场景里，原本要一个 3D 美术加一个前端配合几天的活，现在用自然语言几分钟就能出原型。
三个案例放在一起看
把三个 Prompt 摆在一起会发现，我提要求的方式是同一套：
- 视觉写成可检查的清单。 不写「要好看」，而是写清材质、光影、配色、构图。
- 交互写成物理动作。 不写「要很爽」，而是写清拖拽时怎么形变、松手后怎么回弹。
- 约束写死。 单文件、零外部依赖、开箱即跑，不给它留「引个库凑合」的余地。
这套写法比 Prompt 本身更值得抄。换个场景，照着同样的颗粒度重写，成品不会差太远。
这次实测没测什么
一篇只讲好话的实测没有参考价值，所以把边界讲清楚：
- 只测了前端视觉和交互。 后端、数据、部署都没测。
- 没有性能数据。 帧率、内存占用、低端机表现，一项都没测。
- 没有测移动端。 上面三个 Demo 建议在桌面浏览器里看。
- 没有和其他模型做同题横评。 文中提到 Astra 的地方都是我的使用感受，不是跑分。
- 没有测长任务。 三个案例都在单轮会话内完成，跨会话、跨文件的复杂工程没涉及。
还有一条要单独提醒：能跑起来 ≠ 能上线。 这三个 Demo 我是拿来判断模型能力的，真要做产品，代码该审还是要审。
成本：三个案例吃掉多少额度
我用的是 Plus 套餐，消耗的是套餐里 Codex 会员的额度。三个案例跑完，额度面板是这样的：
- 5 小时限额：用掉约四成
- 周限额：用掉约三分之二
- 请求记录：成功 166 次、失败 2 次，成功率 98.8%
相比上一代常用的 Astra，这个消耗已经相当实惠了。
想把这笔账算得更精细，可以对照 Codex 额度对比：Plus 套餐下 GPT-6.1 Sol 的 5 小时配额是 15–160 次，是所有模型里最紧的一档。所以跑这类任务前，最好先给账号留出余量。
结论：GPT-6.1 Sol 到底什么水准
连续把玩这三个案例，我最直接的三个感受：
- 审美和工程能力终于合到了一起。 以前的模型要么懂代码但审美稀烂，要么能构思但代码跑不通。6.1 Sol 这次的特点是：代码一次给对的概率很高，视觉还明显领先一档。
- 物理和空间理解不再靠猜。 从软体的受力回弹，到 3D 建筑里每个部件的相对位置，它展现出的空间逻辑，已经能接住 Astra 原来的位置。
- 它是「一人公司」的外挂。 做独立产品、接单建站、做解压小工具，只要 Prompt 足够精准，它吐出来的代码已经接近商用量级。
反过来说，这几种情况先别急着换：
- 你要的是复杂推理、Computer Use、长链路 Research——那是 GPT-6 Astra 的主场，这次没测。
- 你的任务对性能敏感，需要真实帧率和内存数据——本文没有这些数据，别拿这篇当依据。
- 你还没接好环境——先在 Codex 里用，或者按 CLIProxyAPI 接进 Claude Code，都行。
该动手的第一步：打开上面三个 Demo，挑一个最接近你需求的，把 Prompt 复制过去，换成你自己的场景跑一遍。十分钟就知道它行不行。
常见问题
GPT-6.1 Sol 写前端动效和 Web 3D 到底行不行？
就这三个案例来看，行。软体受力回弹、Web Audio 原生合成音频、3D 场景的空间连续性，它都跑出了能直接打开的成品，而且都是单文件 HTML、零外部依赖。
这次测试是在 Codex 里做的吗？
不是。三个案例都是在 Claude Code 里调用 gpt-6.1-sol 跑的，消耗的是 ChatGPT Plus 套餐里 Codex 会员的额度。。
三个案例一共消耗了多少额度？
以 Plus 套餐为例，三个案例跑完，Codex 的 5 小时限额用掉约四成，周限额用掉约三分之二。具体数字和截图见上面「成本」一节。
GPT-6.1 Sol 和 Astra 怎么选？
Astra 是上一代旗舰，强在复杂推理和 Computer Use。就这次的前端 / 3D 案例来看，GPT-6.1 Sol 已经能接替它在动态效果上的位置，额度消耗也更实惠。
文中的 Demo 可以直接拿来商用吗？
能跑起来不等于能上线。三个案例都是单文件 HTML，方便你直接二开，但上线前建议自己过一遍代码，尤其是性能和移动端兼容性——这两项本文没有测。
为什么我照抄 Prompt，效果没这么好看？
关键在视觉描述。原文把材质、光影、配色和交互反馈都写成了可检查的具体要求，你换场景时要照着同样的颗粒度重写；只改几个词，成品会差很多。