RoboWebGL

Interactive 3D simulation of robotic arms built with Three.js and WebGL in the browser. Supports Forward Kinematics (FK), Inverse Kinematics (IK), customizable arm configurations (degrees of freedom), real-time trajectory visualization, and an interactive GUI.

---

Features

• Multiple Robot Presets & Degrees of Freedom (DOF):
  • 6-DOF Industrial Arm: Articulated 6-axis robot with end-effector gripper.
  • 4-DOF SCARA Arm: Selective Compliance Assembly Arm with prismatic Z elevator and suction cup.
  • 3-DOF Simple Arm: Educational planar/spatial manipulator.
• Forward Kinematics (FK):
  • Direct joint manipulation via GUI sliders.
  • Real-time end-effector pose (world coordinates and orientation) calculation.
• Inverse Kinematics (IK):
  • Cyclic Coordinate Descent (CCD) numerical solver.
  • Interactive 3D Transform Gizmo: drag the target point directly in 3D space.
• Visuals & Utilities:
  • Trajectory / path trail tracing.
  • Auto demo motion mode for continuous trajectory tracking.
  • Orbit camera controls (Rotate, Pan, Zoom).
  • Configurable parameters via js/robot-config.js.

---

Quick Start

You can run the simulation locally using Python's built-in HTTP server:

# Start local server
python3 -m http.server 8000

Open your browser and navigate to:

http://localhost:8000

---

Controls

Action	Control
Rotate Camera	Left Mouse Button + Drag
Pan Camera	Right Mouse Button + Drag
Zoom	Mouse Scroll Wheel
Move IK Target	Click & Drag 3D Gizmo arrows in IK mode

---

Project Structure

RoboWebGL/
├── docs/
│   └── screenshot.png       # Preview screenshot
├── js/
│   ├── dat.gui.min.js       # GUI control panel library
│   ├── OrbitControls.js     # Three.js camera orbit controls
│   ├── robot-arm.js         # Robot 3D model generator & FK/IK solver
│   ├── robot-config.js      # Robot kinematics & presets configuration
│   ├── three.js             # Three.js library (r126)
│   └── TransformControls.js # 3D transform gizmo for IK target
├── index.html               # Main simulation application and UI
└── README.md                # Project documentation

---

Roadmap

• Run three.js
• Define and show the robot arm 3D model
• GUI for changing parameters
• Work out forward kinematics
• Work out reverse kinematics
• Config file for changing the configuration and DOF of the arm

---

Credit

• Inspired by glumb/robot-gui
• Powered by Three.js