THREE.JS · WEBGPU · 2026.10.06Cyber Arm
Cyber Arm
机械工坊
一间用 Three.js 与 WebGPU 搭建的机械工坊：手指开合，活塞伸缩，回位弹簧随关节联动。观察机构，也可以开启摄像头，让机械臂跟随你的手。
打开机械工坊 ↗桌面浏览器 · 需要 WebGPU · 摄像头可选
先看它动，再亲手控制
作品在独立窗口运行，阅读本文不会加载机械臂模型或请求摄像头。使用支持 WebGPU 的桌面浏览器，等待模型与纹理载入后进入工坊；不启用摄像头也能观察和操作。
拖拽旋转视角，滚轮缩放。通过 Controls 切换手势、拆解视图和互动演示；摄像头需点击 Start camera 并授权后才会启用。
在新窗口体验 ↗01 — 从指尖到机构
动作不只发生在外壳上。
机械手会用舒展、计数、握拳和转腕组成待机动作。切换到拆解或内部视图，可以沿着指节观察驱动轮、推杆与回位弹簧：手指弯曲时，执行器行程和弹簧压缩由同一组关节状态驱动。
缸体保持固定长度，杆件在其中伸缩，弹簧改变螺距。这里展示的是运动学联动与机构外观，并非测量真实受力、材料应力或动力学响应的工程仿真。
02 — 用你的手驱动
同一个动作，两种视图。
开启摄像头后，画面以 21 个关键点和连线显示手部追踪，不在真人手上叠加另一个 3D 模型。Split sync 将追踪画面与工坊并排摆放；机械臂在升起的万向球座上转动，前臂承担大幅摆动，腕部补足掌面朝向。
首次开启会下载手部追踪模型，推理随后在浏览器内进行。让手腕与手指保持在画面中；遮挡、光线和镜头角度都会影响追踪。随时可以停止摄像头，回到手动操作。
03 — 一间可以停留的工坊
灯光、金属与工作台。
机械臂放在诊疗工坊中，周围是工具、备用件、椅子和诊断屏幕。可以近看不同金属表面、橡胶握持区和关节内部，也可以退回全景，观察工作灯如何划出轮廓。渲染由 Three.js 与 WebGPU 完成，作品仍在持续打磨。