Esettanulmány · 2026 · AI · Web · Mobil
A videós demók a vonaton megszakadnak, és egy kameraszög nem mondja meg, hova kell a csípőd.3D-rig motort építettünk, ahol minden gyakorlat veled forog - és ugyanaz a motor megy weben és natívon.
Az AxisFit Next.js webként és Expo natívként megy, egyetlen TypeScript motorról, ami csont-rigeket animál keyframe-szettekről. Minden gyakorlat - guggolás, deadlift, fekvenyomás, húzódzkodás, plank, kitörés - egy keyframe-szett, és a motor kezeli a grip-et, a talaj-igazítást és a függést. Új gyakorlat hozzáadása egy fájl, és egyszerre élesedik weben, iOS-en, Androidon.
- Next.js
- React Three Fiber
- Expo
- TypeScript
- Three.js
A működés
Áttekintés
- 10+
- 3D-riggelt gyakorlat élesben
- 1
- Animációs motor
- 3
- Felület · web + iOS + Android
- 0
- Videó-fájl a payload-ban
Az AxisFit egy fitnesz-app, ahol minden gyakorlat egy 3D-riggelt figuraként megy, amit forgatni tudsz. Ugyanaz az animációs motor hajtja a Next.js webet és az Expo natív appot, így egy új gyakorlat egy keyframe-szett mindkét felületre. Edzéstervek, gyakorlat-könyvtár és haladás-dashboard az első naptól.
Mi készült el
Mit csinál
- 3D-rig gyakorlat-animációk · web + natív, egy motor
- Gyakorlat-könyvtár + edzés-lejátszó + haladás-dashboard
- Egyetlen tartalom-szett mindkét felületen
- Csont-tudatos grip + talaj/függés-igazítás repenként
A probléma
- A videós demók megszakadnak gyenge mobil-térfedéssel
- A formajavítást nehéz egyetlen kameraszögből megérteni
- Web + natív párhuzamos kódbázis minden változást megduplázz
Miért számít
- Minden gyakorlat forgatható és offline-kész
- A forma bármely szögből olvasható
- Egy motor, egy tartalom · egy helyen szállítasz funkciót
Hogyan készült
- 01 · BRIEF
Rögzítsük: minden gyakorlat 3D, nincs videó - és egy motor mindkét felületre.
Az egész projekt ezen a döntésen állt: ugyanaz a motor weben és telefonon, hogy egy új gyakorlat egy keyframe-szett legyen, ne két párhuzamos implementáció.
- 02 · BUILD
A rig-motort közös csomagba emeljük, és mindkét felületet onnan hajtjuk.
A @axisfit/shared tartja a motort, a gyakorlat-metaadatokat, a minta-terveket, a progress-szerződést. Natívan expo-gl + expo-three rajzol; weben react-three-fiber. Mindkét felület rig-et + jelenetet ad át ugyanannak az ExerciseRunner-nek, ami keyframe-eket lerpelget, talaj- vagy függés-igazít és grip-et orientál.
- 03 · SHIP
Könyvtár, lejátszó, dashboard - élesben weben, iOS-en, Androidon.
Három felület élesedett egyszerre ugyanazon a motoron. Új gyakorlat hozzáadása - csak keyframe - mind a három felületre megy ki.
Technológia
Motor
Keyframe-vezérelt csont-rig
mapBones · applyPoseFrame · doGroundAlign · ExerciseRunner - a motor közös TypeScript, nincs duplikáció web és natív között.
Könyvtár
10+ gyakorlat az első napon
Guggolás, deadlift, fekvenyomás, húzódzkodás, plank, kitörés - és a felszerelés köréjük, felületenként helyben építve, hogy a motor felszerelés-agnosztikus maradjon.
Lejátszó
Edzés-flow haladással
Terv → szett → rep per-frame ketyegő riggel; natívan PanResponder-es orbit-kamera, hogy a sportoló válassza a segítő szöget.
Dashboard
Edzés-napló + összegzés
SessionEntry + summarize() pluggable Storage-felülettel - webe localStorage, natívan AsyncStorage, ugyanaz a szerződés.
Esettanulmány
“Minden fitnesz-app, amit láttunk, vagy lapos illusztráció volt, vagy egy kamerás videó, ami a vonaton megszakad. A csapat olyat épített, ahol a test egy 3D modell, amit forgatni lehet a képernyőn, és ugyanaz az animáció megy a weben és a telefonon - mindkettő egyszerre élesedett. Új gyakorlat hozzáadása percek, nem külön videó-forgatás.”
További munkák
Következő projekt
BetEdge