我用 Codex 做了一个摄像头手势 3D 画板：see140 的创作记录

我用 Codex 做了一个摄像头手势 3D 画板：see140 的创作记录

最近我用 Codex 做了一个网页手势交互作品，名字叫 see140。

在线地址是：li1408.github.io/see140

GitHub 仓库是：github.com/li1408/see140

这个项目最初的想法其实很简单：我想做一个不依赖鼠标和键盘，而是通过电脑摄像头识别手势来操作的网页。用户可以在网页里用手画线、缩放画布、清除图案，并且可以切换重力模式，让画出来的线条像真实物体一样下落和回弹。

一开始我并没有完整方案，只是有一个大概方向：想做一个“不将就”的网页手势交互作品。

从 GitHub 找灵感开始

项目开始时，我先让 Codex 去 GitHub 上找有没有类似的网页手势交互项目。

当时我主要关心几个问题：

• 有没有现成的摄像头手势识别项目？
• 有没有用 HTML / JavaScript 做的？
• 有没有效果比较成熟、可以参考的交互？
• 能不能用电脑摄像头识别我的手，然后在网页里产生类似画线、控制、清除的效果？

找了一圈之后，我发现很多项目只是简单 demo。有的能识别手，有的能画线，但整体效果比较粗糙，不太像一个完整作品。于是我没有选择直接照搬，而是把 GitHub 当成灵感来源，重新整理我要的效果。

真正的方向慢慢变清楚了：

我要做的不是一个普通 demo，而是一个摄像头背景下的 3D 手势画板。

从粗糙原型到明确需求

最开始做出来的版本比较简陋，识别也不稳定。我就开始不断和 Codex 讨论：这个项目到底应该长什么样？

后来我们确认了几个核心效果：

• 页面背景直接使用摄像头画面。
• 用户用食指和拇指捏合来画线。
• 线条是普通的 3D 线条，不要太卡通。
• 双手可以缩放整个画布。
• 双手握拳可以清除线条。
• 清除时线条不能直接消失，而是要变成粒子消散。
• UI 可以切换黑色主题和白色主题。
• UI 可以切换画板模式和重力模式。
• 关闭重力时，线条像普通画板一样停留。
• 开启重力时，线条会往下掉，并且碰到底部或边界时有回弹。

这个过程让我感受到，AI 做项目并不是一句话生成最终成品。很多时候真正重要的是：你要不断告诉它“这不是我要的”“这里太简陋了”“这个效果不稳定”“这里还可以更高级”。

Codex 负责实现和排错，我负责判断效果和方向。

最难的问题：手势识别不稳定

真正开始打磨之后，最明显的问题就是手势识别不稳定。

一开始，只有屏幕中间的位置比较准，两边偏差很大。识别点也不统一，有时候在指尖，有时候又跑到手心。这样画线的时候就会很飘，不像是我真的在用指尖控制画笔。

后来我们重点解决了几个问题：

• 统一用食指指尖作为绘画点。
• 加入校准流程，让识别坐标和屏幕坐标更准确。
• 扩大画布范围，不再只局限在屏幕中间。
• 增加平滑处理，让画线点不要抖得太厉害。
• 恢复并优化清除时的粒子消散效果。
• 加入双手缩放，让画布能被两只手控制。

这个阶段让我意识到，摄像头手势交互最难的不是“能识别手”，而是让识别结果足够稳定、可控、可用。

只有识别稳定了，后面的视觉效果才有意义。

加入重力模式和粒子清除

我不想让它只是一个普通画板，所以加入了重力模式。

在普通画板模式下，线条会停留在画面中，就像正常绘画一样。开启重力后，线条会受到物理效果影响，往下掉，并且碰到底部或边界时会回弹。

清除也不是普通的“一键消失”。我希望它更有仪式感，所以做成了双手握拳清除。触发后，画面里的线条会变成粒子扩散、消散。

这个效果是整个项目里我比较喜欢的一部分，因为它让“清除”这个动作不只是功能，而变成了一个视觉反馈。

视觉风格和启动动画

主功能做完之后，我开始觉得还缺一点“作品感”。

后来我给 Codex 提供了一段抖音上看到的开场动画参考，但我并不想复刻里面的文字或具体排版。我只想要那种黑白、高级、克制的开场感觉。

我们先单独做了一个原生 HTML + CSS + JavaScript 的启动动画原型，确认效果后再接入主网站。

最终启动动画流程是：

1. 页面一开始是纯黑背景。
2. 中心有一个小白点呼吸。
3. 小白点变成圆环加载。
4. 圆环加载中间有轻微停顿。
5. 圆环必须完整填满。
6. 填满后用户点击继续。
7. 出现类似浏览器窗口展开的动画。
8. 窗口内部从黑色过渡到白色。
9. 最后平滑进入主应用。

这里我们还修过一个很细的小问题：圆形进度条看起来没有完全填满。后来专门调整了圆环的最终状态，让它在点击继续前是一个完整的圆，而不是有缺口的进度条。

这个启动动画不是为了单纯炫技，而是为了让用户的视觉注意力从“加载”自然过渡到“主界面”。它让整个作品从一个功能 demo 更像一个完整网页。

整理项目和部署

最后，我把项目整理成了 see140 文件夹，并把旧项目名、旧说明、临时测试文件都清理掉。

项目本地路径是：

E:\AI\see140

我还让 Codex 帮我写了一键启动脚本，方便本地打开：

start-see140.cmd

之后又把项目部署到了 GitHub Pages。

线上地址是：

https://li1408.github.io/see140/

因为这个项目需要调用摄像头，所以必须使用 HTTPS。GitHub Pages 正好满足这个条件。部署完成后，我还让 Codex 用浏览器自动测试了一遍线上页面，确认启动动画能播放，点击后能进入主应用，摄像头元素和校准界面也能正常出现。

不过这里也有一个现实问题：GitHub Pages 在中国大陆访问不一定稳定，而且项目中手势识别模型如果依赖国外资源，也可能影响加载。后续如果想让大陆同学稳定访问，还需要考虑把模型文件本地化，或者部署到国内对象存储和 CDN。

这次用 Codex 的感受

这次项目给我最大的感受是：Codex 更像一个协作工程师，而不是一个“一次生成答案”的工具。

整个过程不是：

我说一句需求，然后 AI 直接生成成品。

而更像是：

我提出想法，Codex 做出版本，我反馈问题，它继续修改，我们一起把效果打磨出来。

它帮我做了很多事情：

• 去 GitHub 找灵感。
• 分析哪些项目可以参考。
• 根据我的描述确认需求。
• 写代码实现交互。
• 修复识别不稳定的问题。
• 加入校准流程。
• 做启动动画原型。
• 把动画接入主网站。
• 整理项目文件夹。
• 部署到 GitHub Pages。
• 验证线上访问效果。

而我主要负责审美判断、需求取舍和最终效果确认。

这也是我觉得这次项目比较有意思的地方：它不是一个纯 AI 生成作品，而是一个人和 AI 多轮协作、不断修改、不断打磨出来的网页作品。

从最开始只是想做一个“手势交互网页”，到最后变成一个有启动动画、有摄像头背景、有 3D 线条、有重力模式、有粒子清除、能在线访问的作品，中间经历了很多小问题。

但也正是这些问题，让这个项目更像一个真实的创作过程。

项目说明与致谢

see140 的初始技术参考来自 Cygra 的开源项目 Hand Gesture Whiteboard。

原项目提供了基于 Next.js、MediaPipe Gesture Recognizer 和 Three.js 的手势白板基础能力。我在此基础上进行了二次创作和改造，包括重新设计视觉风格、优化手势识别体验、加入校准流程、双手缩放、重力模式、粒子清除效果、黑白主题、开场启动动画，并最终部署到 GitHub Pages。

感谢 Cygra 开源的 Hand Gesture Whiteboard 项目。这个项目为 see140 提供了重要的技术参考和基础实现。

结尾

see140 目前还不是最终形态。后面我还想继续优化手势识别稳定性、加载速度，以及大陆访问体验。

但对我来说，它已经完成了一个重要目标：

把一个模糊的想法，变成了一个可以打开、可以体验、可以分享给朋友的网页作品。