|
| 1 | +# three.js demos |
| 2 | + |
| 3 | +Five progressively richer browser demos of the ADR-097 sensing-helpers scene, |
| 4 | +ending with a live MediaPipe-Pose → Mixamo X Bot retargeting pipeline driven |
| 5 | +by a real ESP32 CSI feed. |
| 6 | + |
| 7 | +## Run them |
| 8 | + |
| 9 | +```bash |
| 10 | +python examples/three.js/server/serve-demo.py |
| 11 | +# then open one of the URLs the script prints |
| 12 | +``` |
| 13 | + |
| 14 | +`server/serve-demo.py` is a tiny `ThreadingHTTPServer` with aggressive |
| 15 | +no-cache headers — the stdlib `http.server` is single-threaded and times out |
| 16 | +on the parallel script + FBX fetches the demos make. |
| 17 | + |
| 18 | +## Demos |
| 19 | + |
| 20 | +| # | File | What it shows | |
| 21 | +|---|------|---------------| |
| 22 | +| 01 | [`demos/01-helpers.html`](demos/01-helpers.html) | Plain ADR-097 helpers in the point-cloud viewer | |
| 23 | +| 02 | [`demos/02-cinematic.html`](demos/02-cinematic.html) | Cinematic camera + pseudo-CSI visualization on top of #01 | |
| 24 | +| 03 | [`demos/03-skinned.html`](demos/03-skinned.html) | GLTF skinned mesh + additive animation blending | |
| 25 | +| 04 | [`demos/04-skinned-fbx.html`](demos/04-skinned-fbx.html) | Mixamo X Bot loaded from FBX in the ADR-097 scene | |
| 26 | +| 05 | [`demos/05-skinned-realtime.html`](demos/05-skinned-realtime.html) | Webcam → MediaPipe Pose Heavy → Mixamo IK retarget, live ESP32 CSI overlay | |
| 27 | + |
| 28 | +| Screenshot | | |
| 29 | +|---|---| |
| 30 | +|  |  | |
| 31 | +|  |  | |
| 32 | +|  | | |
| 33 | + |
| 34 | +## Layout |
| 35 | + |
| 36 | +``` |
| 37 | +examples/three.js/ |
| 38 | +├── README.md |
| 39 | +├── .gitignore |
| 40 | +├── demos/ # 5 self-contained HTML demos |
| 41 | +│ ├── 01-helpers.html |
| 42 | +│ ├── 02-cinematic.html |
| 43 | +│ ├── 03-skinned.html |
| 44 | +│ ├── 04-skinned-fbx.html |
| 45 | +│ └── 05-skinned-realtime.html |
| 46 | +├── screenshots/ # one PNG per demo |
| 47 | +│ └── 0N-*.png |
| 48 | +├── server/ |
| 49 | +│ ├── serve-demo.py # local HTTP server with no-cache headers |
| 50 | +│ └── ruvultra-csi-bridge.py # ESP32 CSI WebSocket bridge (ruvultra:8766) |
| 51 | +└── assets/ |
| 52 | + └── X Bot.fbx # gitignored — get your own from mixamo.com |
| 53 | + # (FBX Binary, T-Pose, Without Skin) |
| 54 | + # used by demos 04 and 05 |
| 55 | +``` |
| 56 | + |
| 57 | +## Mixamo X Bot |
| 58 | + |
| 59 | +Demos 04 and 05 expect `assets/X Bot.fbx`. It's gitignored (size + license |
| 60 | +boundary). Download yours from [mixamo.com](https://mixamo.com): pick the |
| 61 | +"X Bot" character, export as **FBX Binary**, **T-Pose**, **Without Skin**, |
| 62 | +and drop it into `assets/`. |
| 63 | + |
| 64 | +## Live ESP32 CSI overlay (demo 05 only) |
| 65 | + |
| 66 | +`server/ruvultra-csi-bridge.py` is the systemd-deployable bridge that runs on |
| 67 | +the `ruvultra` host (over Tailscale). It listens for ESP32-S3 CSI on UDP and |
| 68 | +re-broadcasts it as WebSocket frames at `ws://ruvultra:8766/csi`. Demo 05 |
| 69 | +auto-connects; if the socket is down, it falls back to the bundled idle clip |
| 70 | +plus a synthetic CSI driver. |
| 71 | + |
| 72 | +## Open issues |
| 73 | + |
| 74 | +- [#583](https://github.com/ruvnet/RuView/issues/583) — head/face tracking |
| 75 | + fidelity in `05-skinned-realtime.html`. Recommended fix: swap MediaPipe |
| 76 | + Pose Heavy for MediaPipe Holistic (same API, adds 468-point face mesh + |
| 77 | + hand landmarks for proper PnP head pose and finger curl tracking). |
0 commit comments