About the Project
Inspiration
Industrial robot arms are expensive black boxes for most students — you can't experiment on real hardware. I wanted to build a browser-based 3D simulator that lets anyone understand 6-axis kinematics without installing anything, just by opening a URL.
What I Learned
Building this from scratch meant implementing the full kinematics math pipeline: modified DH parameters for forward kinematics ($T_0^6 = T_1 T_2 T_3 T_4 T_5 T_6$), and a real-time Jacobian damped least-squares solver for inverse kinematics ($\Delta\theta = J^T(JJ^T + \lambda^2 I)^{-1}e$). I also learned that smooth motion matters — a discontinuous joint-angle jump destroys the illusion of a physical machine, so all movement goes through a unified interpolation pipeline with easeInOutCubic (400ms click) and speed-limited chase (120°/s long-press).
How I Built It
Next.js 14 + TypeScript for the app shell, Three.js for the 3D scene with a hierarchical Group-based robot model. All math — Mat4x4 operations, Jacobian computation, Gauss-Jordan matrix inversion, Euler angle conversion — is hand-written TypeScript with zero dependencies. The project runs fully offline as a static export.
Challenges
The hardest decision was the control paradigm: I initially designed a tab-based UI separating forward and inverse kinematics modes, but realized this contradicted how real robot controllers work. Real operators press directional buttons to move the end-effector, not toggle between "math modes." Merging two conflicting design documents into one coherent spec, then resolving 12 separate ambiguity issues (from IK failure UX to coordinate system display conventions), taught me that good documentation is as hard as good code.
Built With
- hand-written-kinematics-math
- next.js-14
- three.js
- three.js-+-react-three-fiber
- typescript
Log in or sign up for Devpost to join the conversation.