Three.js Gadgets

A collection of interactive 3D demos built with Three.js

⚙️

Differential Simulation

Understand how a differential works: watch spider gears and side gears respond to straight, turning, and slip modes.

🏎️

F1 Systems Lab

Visualize powerunit, differential, steering geometry, and suspension dynamics with live controls and data.

🧊

Mental Rotation Trainer

Allocentric spatial trainer with adjustable stimulus pairs, rotation angles and timed scoring.

Compute Showcase

Matrix math, particle physics and Game of Life demos running through GPU compute shaders.

Drone

Drone Simulation

Watch a drone follow a figure-8 path while advanced algorithms handle navigation and state estimation. -- Kalman Filter (KF): The KF fuses noisy position measurements (yellow dots) with the drone's motion model to produce a smooth, accurate state estimate (blue trail). The translucent blue ellipsoid around the drone visualizes the filter's uncertainty - it shrinks as the estimate becomes more confident. & Model Predictive Control (MPC): The MPC controller looks ahead 8 steps into the future (green ghost drones and line). It computes optimal acceleration commands to minimize tracking error and control effort, allowing the drone to smoothly follow the red reference path even with sensor noise. & Visual Feedback: The UI panel shows real-time KF error, MPC horizon, and drone speed. You can orbit, pan, and zoom the camera freely. Double-click the ground to set a temporary waypoint, or press `R` to reset the view and `F` for fullscreen.