A React Three Fiber-based demonstration of inverse kinematics (IK) using the FABRIK algorithm to simulate realistic leg movement.
IK Kinetics is an interactive 3D visualization that demonstrates how inverse kinematics can be used to create natural-looking limb movements. The project uses the FABRIK (Forward And Backward Reaching Inverse Kinematics) algorithm with constraints, rest pose biasing, and automated stepping behavior.
- Interactive IK System: Real-time response to target position changes
- Constraint-based Movement: Joint angle constraints for realistic motion
- Rest Pose Biasing: Limbs naturally return to a default pose when possible
- Dynamic Stepping: Automatic stepping when targets exceed maximum reach
- 3D Visualization: Complete with joints, segments, and interactive controls
- Ground Interaction: Target positions automatically mapped to ground level
The project implements several advanced techniques:
- FABRIK Algorithm: Custom implementation with iterative solving
- Natural Constraints: Joint limits prevent unnatural poses
- Stable Orientation: Special handling to avoid rotation artifacts
- Raycasting: Ground detection for accurate foot placement
- Node.js (version 16 or higher)
- npm or yarn
- Clone the repository:
git clone [repository-url]
cd ik-kinetics- Install dependencies:
npm install
# or
yarn- Start the development server:
npm start
# or
yarn start- Open your browser to
http://localhost:3000
- Moving the Body: Use the transform controls (yellow gizmo) to move the body sphere
- Leg Target: The yellow sphere attached to the body determines where the leg tries to reach
- Observing IK: Watch how the leg segments (brown boxes) adjust automatically
- Step Behavior: When the target exceeds maximum reach, the foot will step to the new position
- IKDemo.jsx: Main container component with 3D environment setup
- LegWithIK.jsx: Core implementation of the FABRIK algorithm and leg behavior
- Ground.jsx: Simple ground plane for interaction
- SkeletonHelper.jsx: Helper component for visualizing joints and connections
- React (v19.0.0)
- Three.js (v0.160.0)
- @react-three/fiber (v9.0.4)
- @react-three/drei (v10.0.1)
- Leva (v0.10.0) for parameter controls
The FABRIK algorithm works by alternating between forward and backward passes through the kinematic chain:
- Forward Pass: Starting from the target, each joint is positioned toward the root
- Backward Pass: Starting from the root, each joint is positioned toward the target
- Constraints: After each pass, constraints are applied to maintain natural poses
- Rest Pose Bias: A subtle force pulls joints toward a predefined rest pose
The stepping behavior activates when the target is beyond the maximum reach of the leg, creating a simple yet effective locomotion system.
- The FABRIK algorithm was first described by Andreas Aristidou and Joan Lasenby
- Thanks to the React Three Fiber community for their excellent 3D libraries