SAGAR-TAMANG/ultron-by-sagar-builds

# ULTRON Orb UI 一个灵感源自钢铁侠的全息 Orb，基于 **Next.js**、**Three.js** 和 **MediaPipe** 手势追踪构建——通过你的网络摄像头，徒手即可对其进行控制。  https://github.com/user-attachments/assets/91578a83-9a27-44e8-84b0-96defcfd7366 ## 快速开始 ``` npm install npm run dev ``` 打开 [http://localhost:3000](http://localhost:3000)。 ## 操作说明 ### 鼠标 / 触摸 | 输入 | 动作 | | --- | --- | | 拖动 | 旋转 Orb | | 滚动 / 捏合 | 放大和缩小 | ### 手势（网络摄像头） 点击 **GESTURES OFF**（或按下 `G`）并允许访问摄像头，然后： | 手势 | 动作 | | --- | --- | | 单手捏合（拇指 + 食指）并移动 | 旋转 Orb | | **双手**捏合，张开 / 靠拢 | 放大 / 缩小 | ### 键盘 | 按键 | 动作 | | --- | --- | | `G` | 切换手势控制 | | `R` | 重置视图 | | `+` / `−` | 放大 / 缩小 | ## 工作原理 - **`lib/orbScene.ts`** — Three.js 场景：包含多层线框外壳、螺旋状内核、漂浮的代码文本 sprite、轨道碎片、粉尘粒子、扫描环，以及 bloom + chromatic-aberration 后期处理栈。 - **`lib/handTracker.ts`** — 在网络摄像头画面上运行的 MediaPipe HandLandmarker。带有滞后阈值的捏合检测：单手捏合可旋转 Orb，双手捏合则通过张开或靠拢进行缩放。 - **`components/JarvisOrb.tsx`** — 负责连接场景、追踪器和输入的 HUD 中枢组件。 ## 许可证 MIT

标签：MediaPipe, Three.js, Web 3D可视化, 人机交互, 手势追踪, 自动化攻击