Robot Arm Motion Planner

Drag a target and a six joint arm follows it live through three inverse kinematics solvers, then plans a collision free path around the obstacles you place.

Robotics and Simulation

Building the workcell...

How it works

Method

Move the target in 3D and the arm solves its six joint angles to put the gripper there, respecting every joint limit. Switch between three inverse kinematics solvers and watch the iterations and error each one needs. Turn on the reachability cloud to see where the gripper can go, and the manipulability ellipsoid to see how freely it can move, which flattens as the arm nears a singularity. Add boxes and cylinders, press Plan path, and a sampling planner searches for a collision free route from the home pose to the target; the search, the raw path and the smoothed path all draw in the scene, then the arm plays the move. Pick and place runs the same planner twice to carry an object past the obstacles.

Data

None: the arm, the workcell and the obstacles are all simulated in your browser. The arm is our own six joint design, not a copy of any real robot.

Model

Forward kinematics compose one transform per joint to get the gripper pose; the geometric Jacobian comes from the same chain. The solvers are Jacobian damped least squares (position and orientation), CCD and FABRIK (position). Planning runs in the six dimensional joint space: RRT grows a tree, RRT star rewires it toward a shorter path, and PRM builds a roadmap, with collisions checked by treating the arm as capsules against the boxes and cylinders. A shortcut pass smooths the path and a trapezoidal speed profile times the motion.

Build

A three.js workcell, Z up so the physics frame is the world frame, with soft shadows and a draggable gizmo for the target and the obstacles. The kinematics, the three solvers, the three planners and the trajectory timing are hand written TypeScript that runs entirely in your browser. Lighter on phones. Nothing is sent anywhere.

Tech

  • Inverse kinematics
  • Motion planning
  • RRT
  • WebGL

Data credits