1. 摘要
用 TRAE SOLO 从零搭建了一个融合中国传统五声音阶与赛博朋克视觉风格的音乐互动体验——「赛博国风」。灵感来源于日本创作者 daniwell 的 ZUNDAMOWARP，将原作的ずんだもん替换为程序化生成的低多边形的SOLO小机器人，用 Web Audio API 合成宫商角徵羽五声音阶，配合 Three.js 后处理特效（泛光、残影、故障艺术），点击屏幕不同区域即可触发独特的音效与视觉反馈。
Demo地址：https://solo.h4h.space/music/
2. 背景
刷到一个日本创作者音乐互动页面，玩法特别简单——就是点屏幕，但点着点着根本停不下来。3D 角色跟着节奏动，画面各种特效炸裂，音效还贼上头。
当时第一反应就是：这个我也要做一个！
但直接照搬没什么意思，就想加点自己的东西进去。于是找 SOLO 聊了聊，从分析原作技术栈开始，一步步讨论下来，最后确定了方向——把原作的日系元素全部替换成中国风：角色换成古风侠客，音效换成五声音阶，视觉换成赛博国风。整个过程就是一边讨论一边搓，SOLO 负责实现，我负责拍板。
3. 实践过程
3.1 任务拆解
一开始和 SOLO 讨论完方向后，我们把整个项目拆成了 6 个模块：
- 项目框架 — Vite + Three.js + GSAP 搭建基础
- 3D 场景 — 粒子背景、赛博灯笼、祥云、霓虹环、漂浮汉字
- 角色构建 — 程序化生成低多边形古风侠客（发髻、汉服、飘带、发光剑）
- 音频系统 — Web Audio API 五声音阶合成 + 泛音 + 混响
- 交互逻辑 — 屏幕分区点击，触发音效+角色动画+场景特效+故障效果
- UI 界面 — 赛博朋克风格标题页、霓虹闪烁、扫描线效果
3.2 使用的 SOLO 能力
- 逆向分析：深入分析原作页面结构、网络请求、JavaScript 源码，摸清技术底牌
- 代码生成：一次性生成完整的 Three.js 后处理管线（Bloom + Afterimage + 自定义 Glitch Shader）
- 模块化拆分：将场景、角色、音频、交互拆分为独立模块，结构清晰
- GLSL 着色器编写：自定义故障效果着色器（RGB 通道偏移 + 扫描线 + 暗角）
- Web Audio API 音频合成：五声音阶振荡器 + ADSR 包络 + 泛音叠加 + 卷积混响
3.3 关键过程
第一步：和 SOLO 一起拆解原作
先把 ZUNDAMOWARP 的技术架构摸清楚。SOLO 帮我分析了页面源码和网络请求，发现了核心依赖：Three.js v0.95 + GSAP v2 + MMDParser（解析 PMD/VMD 模型格式）。原作用的是 MMD 格式的 3D 角色模型，纹理以 Base64 内嵌在 JSON 里，音效也是 Base64 编码的 MP3。
聊完之后我们确定了几个关键决策：
- 角色：不用 MMD 模型，用 Three.js 基础几何体程序化生成，更轻量也更有赛博感
- 音乐：不用预制音频，用 Web Audio API 实时合成五声音阶
- 风格：保留原作的"点击触发"交互逻辑，视觉全部换成中国元素
第二步：确定中国风元素
这一步是和 SOLO 讨论最久的部分。我们聊了几个方向：
| 原作元素 | 替换方案 | 理由 |
|---|---|---|
| ずんだもん (Q版角色) | 低多边形古风侠客 | 程序化生成，无需外部模型 |
| 日式音效 | 五声音阶 (宫商角徵羽) | 最具辨识度的中国音阶 |
| 霓虹几何体 | 灯笼、祥云、汉字 | 经典中国视觉符号 |
| 粉紫配色 | 红金青赛博配色 | 中国红 + 赛博青的碰撞 |
第三步：搭建场景和后处理
场景元素包括：
赛博灯笼 — 八面体 + 发光 + 点光源，在空间中缓缓浮动
赛博祥云 — 多球体组合，红/青双色随机
漂浮汉字 — 龙凤云雷风水火山，若隐若现
霓虹光环 — 三层不同颜色的旋转光环
网格地面 — 透视线条向远处延伸，赛博朋克经典元素
后处理特效链：RenderPass → UnrealBloom（霓虹发光）→ Afterimage（残影拖尾）→ 自定义 Glitch Shader（RGB 偏移 + 扫描线 + 暗角）
第四步：实现交互
屏幕被划分为 8×4 的网格，每个区域点击后同时触发：
五声音阶音符（15 个音高，跨 3 个八度）
角色动画（头部转向、手臂摆动、袖子飘动、光环脉冲）
场景特效（灯笼闪烁、霓虹环扩散）
故障效果（画面撕裂 + RGB 偏移）
粒子爆发（8 个彩色球体径向扩散）
3.4 踩坑与解决
坑 1：Three.js 版本跨度太大
原作用 Three.js v0.95（2018 年），我用的是 v0.170。API 变化不少，Clock 被标记 deprecated，EffectComposer 的 import 路径也变了。SOLO 帮我快速调整了兼容性。
坑 2：Web Audio 自动播放被拦截
浏览器要求 AudioContext 必须在用户交互后创建。一开始页面加载就初始化，结果被静默拦截了。改成点击"开始"按钮时才初始化就好了。
坑 3：很多AI给的效果实现不了
比如说原来的页面因为它就是一个真正的3D角色模型——有几千个顶点、完整的骨骼系统、手绘纹理贴图、卡通渲染。这不是代码"画"出来的，而是3D建模软件（如 PMD Editor / Blender）中建模后导出的。用代码写画出来的侠客就很丑，于是我就把solo小机器拿出来重新山寨了一把
4. 成果展示
最终产出了一个完整的浏览器端音乐互动体验——赛博国风 · CYBER GUOFENG。
核心亮点：
- 赛博灯笼 — 八面体 + 发光 + 点光源，在空间中缓缓浮动旋转
- 漂浮汉字 — 龙凤云雷风水火山在背景中若隐若现
- 五声音阶 — 宫商角徵羽实时合成，带泛音和混响
- 故障特效 — 点击时画面撕裂 + RGB 偏移 + 扫描线
后处理管线 — 泛光 + 残影 + 暗角，赛博朋克氛围拉满
5. 效果与总结
| 维度 | 数据 |
|---|---|
| 开发方式 | 和 SOLO 讨论方向 + SOLO 生成代码，全程对话驱动 |
| 模块数 | 4 个核心模块（scene / character / audio / main） |
| 3D 元素 | 粒子、灯笼、祥云、光环、汉字、网格地面、角色 |
| 音效 | 15 个五声音阶音符 + 泛音 + 混响 + 打击乐 |
| 后处理 | Bloom + Afterimage + 自定义 Glitch Shader |
| 交互区域 | 32 个（8×4 网格） |
整个过程的感受就是：想法是我的，实现是 SOLO 的，审美判断是我们一起拍的板。 从"觉得有意思想复刻"到最终成品，中间的技术选型、元素替换、风格定义都是讨论出来的。SOLO 不只是个代码生成器，更像是一个能跟你聊方向、给建议、然后帮你把想法落地搭档。
6. 互动
如果让你给这个赛博国风加个功能，你会加什么？欢迎评论区脑洞~
觉得有帮助的话，点个赞支持一下~