网页摄像头驱动的蜘蛛侠多元宇宙面具
Note
打开摄像头，用手势切换 Gwen / Miles / Peter 等角色，实时人脸替换 + 3D 粒子星云，叠加漫画风特效。
- MediaPipe 实时人脸 + 手势追踪（免安装）
- 手势映射角色：open-palm→Gwen、食指→Peter、剪刀→Miles
- 3D 粒子星云 + 角色 portal 光门
- 漫画风：halftone 网点 / 粗黑描边 / glitch 故障特效
打开 Live Demo 即可免安装、纯浏览器体验。
MediaPipe Three.js WebGL TensorFlow.js Canvas
- HOT PULL · 热搜抽卡 — 实时热搜抽卡小游戏
- PIXELBEAD · 拼豆星球 — 像素拼豆 × 乐高 × 3D 打印
- Louis Ding · 作品集 — 个人作品集
- SnapPrint 咔印3D — 图生 3D 打印工坊
- 龙族同人个人站 · Dragon Raja — 龙族同人站
以仓库内 LICENSE 文件为准（同人作品标注 CC BY-NC 4.0 者仅限非商用）。
网页摄像头驱动的蜘蛛侠多元宇宙面具
Note
打开摄像头，用手势切换 Gwen / Miles / Peter 等角色，实时人脸替换 + 3D 粒子星云，叠加漫画风特效。
- MediaPipe 实时人脸 + 手势追踪（免安装）
- 手势映射角色：open-palm→Gwen、食指→Peter、剪刀→Miles
- 3D 粒子星云 + 角色 portal 光门
- 漫画风：halftone 网点 / 粗黑描边 / glitch 故障特效
打开 Live Demo 即可免安装、纯浏览器体验。
MediaPipe Three.js WebGL TensorFlow.js Canvas
- 实时热搜抽卡小游戏 — 实时热搜抽卡小游戏
- 像素拼豆 × 乐高 × 3D 打印 — 像素拼豆 × 乐高 × 3D 打印
- 个人作品集 — 个人作品集
- 图生 3D 打印工坊 — 图生 3D 打印工坊
- 龙族同人站 — 龙族同人站
以仓库内 LICENSE 文件为准（同人作品标注 CC BY-NC 4.0 者仅限非商用）。
打开页面后，你会进入一片会呼吸的粒子星云——来自不同宇宙的 19 位蜘蛛侠化作漂浮的光门环绕在你周围，每一位都配有面具肖像、生平介绍、首次登场与标志台词。切换到“变身实验室”，摄像头会识别你的脸和手势：四种手势分别切换四套经典面具，其他角色可在面具条中手动选择，还能拍照存档。
这个项目需要本地 HTTP 服务器（浏览器对摄像头权限和本地模型加载有安全要求）。两种方式任选：
- 双击
start.bat（Windows）：自动用 Python 或 Node.js 启动服务器并打开浏览器。 - 手动启动：
python -m http.server 8000，或node serve.mjs然后访问http://127.0.0.1:8000/。
直接双击
index.html打开是不行的（模块加载和摄像头都会被浏览器拦截）。
星云漫游
- 拖动旋转视角、滚轮或双指缩放、点击光门查看角色介绍。
- 19 位来自不同宇宙的蜘蛛侠：漫画/动画角色 16 位 + 真人电影蜘蛛侠 3 位（托比·马奎尔版 E-96283、安德鲁·加菲尔德版 E-120703、汤姆·霍兰德版 E-199999）。
- 每位角色都有面具肖像、人物生平、首次登场、标志台词与四项能力。
- 角色面板内置 8 种画风切换：原色 / 黑白 / 鎏金 / 夜色 / 深蓝 / 霓虹 / 银灰 / 深海（配色与质感参考一组画风参考图推导）。
- 肖像默认为程序原创绘制（与实时变身共用同一套面具几何，配色与眼型按角色设定还原）；如你拥有可合法使用的角色图片，放入
assets/portraits/{角色id}.jpg即可自动替换（角色 id 见 data.js）。 - 当前已内置真实图片的 7 位角色：
peter（经典彼得）、miles（迈尔斯）、gwen（格温）、miguel（2099）、noir（暗影）、iron（钢铁蜘蛛侠）、holland（荷兰弟版）。调整对应关系或补充其他角色，替换/新增assets/portraits/{角色id}.jpg即可。
变身实验室
- 摄像头实时识别面部与双手（MediaPipe），把所选角色的蜘蛛侠面具贴合到你的脸上（共 19 套，配色与眼型按角色设定还原）。
- 模型首次下载后保存在浏览器本地（IndexedDB），之后再进实验室无需重新下载；面部识别先就绪，手势识别后台加载。
- 面具替换：检测到人脸即把当前蜘蛛侠的动漫脸贴合到你的脸上（漫画风 + 故障面具视频），握拳一下切换到下一个角色；无需额外手势即可看到面具。
- 双手指尖牵出三层 AR 滤镜面片（说明默认收起，点击底部「滤镜说明」展开）：红 = 双手拇指+食指（复古半调印刷）、蓝 = 双手食指+中指（冷调旧电视）、绿 = 双手中指+小指（复古伪彩）。
- “拍照存档”会把当前画面（含面具）定格下载为 PNG。
其余 15 位角色可在面具条中手动选择。
spider-verse-nebula/
├─ index.html 入口页面
├─ css/style.css 样式（设计令牌见 tokens.css）
├─ js/
│ ├─ data.js 角色与面具风格数据
│ ├─ nebula.js Three.js 星云粒子与光门
│ ├─ mask.js 面具几何与绘制（实时变身与肖像共用）
│ ├─ portraits.js 角色面具肖像生成
│ ├─ transform.js 人脸/手势识别与手势换面具
│ └─ main.js 应用总控
├─ libs/ Three.js 与 MediaPipe 运行时（已本地化）
├─ models/ 人脸与手势识别模型（已本地化）
├─ serve.mjs 本地服务器
└─ start.bat 一键启动脚本
所有运行库和 AI 模型都已下载到本地，libs/ 与 models/ 目录完整后即可离线运行（标题字体来自 Google Fonts，离线时自动回退系统字体）。
已通过 GitHub Pages 部署：https://luisdingww-bit.github.io/spider-verse-nebula/
仓库地址：https://github.com/luisdingww-bit/spider-verse-nebula
- 摄像头画面只在你的浏览器本地处理，不会上传到任何服务器。
- 推荐 Chrome / Edge 最新版；首次使用变身实验室需要允许摄像头权限。
- 无摄像头环境会自动提示，星云漫游不受影响。
角色与设定为粉丝向资料整理，蜘蛛侠及相关角色版权归漫威所有。
本项目代码与站点结构采用 CC BY-NC 4.0 许可（详见 LICENSE）， 仅允许非商业使用，使用时请保留署名。蜘蛛侠及相关角色、设定版权归漫威（Marvel）所有；本项目为粉丝向同人作品，与漫威无关。