A 3D simulation of a 3-Degree-Of-Freedom (3DOF) 3R elbow-type robotic manipulator, developed entirely in WebGL using Three.js. This project was created as the Final Project for the Interactive Graphics course within the Master's Degree in Artificial Intelligence and Robotics at Sapienza University of Rome.
The simulator allows real-time Cartesian control of the manipulator via inverse differential kinematics. It features a fully interactive environment, including a physics-enabled magnetic grasper, singularity avoidance algorithms, and high-quality PBR (Physically Based Rendering) materials.
📄 Read the Technical Documentation
- Camera-Relative Cartesian Control: The end-effector's movement is mapped to the user's camera perspective. Pressing "Forward" moves the robot away from the current camera view, achieved by dynamically computing normalized planar vectors.
- Inverse Differential Kinematics: Joint velocities are computed in real-time using the Moore-Penrose pseudo-inverse of the analytical Jacobian matrix.
-
Singularity & Collision Avoidance: The system actively prevents the robot from entering singular configurations (blocking negative joint velocity when fully stretched) and implements a repulsion field to prevent self-collision near the central Z-axis (
$x,y = 0,0$ ). - Interactive Magnetic Grasper: The end-effector features a toggleable magnet capable of attracting and transporting a metal sphere. The sphere interacts with gravity and falls with constant acceleration when released.
-
Realistic Environment Rendering: * Custom PBR materials for the factory floor, utilizing color, roughness, normal, ambient occlusion, and displacement maps.
- A volumetric lighting setup (Ambient, Directional, and Spotlights) to ensure realistic reflections and shadows.
- Procedurally generated, moving clouds that dissolve dynamically at the edge of the skybox.
| Key | Action |
|---|---|
| W / S | Move end-effector Forward / Backward (relative to camera) |
| A / D | Move end-effector Left / Right (relative to camera) |
| Q / E | Move end-effector Down / Up (Z-axis) |
| K | Toggle Magnetic Grasper |
| Mouse Click + Drag | Orbit Camera |
| Scroll Wheel | Zoom In / Out |
Additional UI Controls: You can adjust the end-effector speed and toggle the environment lights directly from the on-screen interface.
- Rendering Engine: Three.js
- Mathematics: Math.js (utilized for calculating the pseudo-inverse matrix)
- 3D Modeling: Blender (Robot models and textures)
- Environment Assets: Sourced from Sketchfab and ambientCG
To run this project on your local machine, you will need a local web server to avoid CORS issues when loading external 3D models and textures.
- Clone the repository:
git clone [https://github.com/SapienzaInteractiveGraphicsCourse/final-project-marcocasu.git](https://github.com/SapienzaInteractiveGraphicsCourse/final-project-marcocasu.git)