A premium, interactive 3D physics sandbox built for GSoc 2026. This application transforms abstract physical concepts into a high-fidelity, interactive playground where users can visualize, manipulate, and calculate textbook physics in real-time.
🌐 Live Demo: https://physics-sanu.vercel.app
Watch part 1 of the high-fidelity interaction demo.
Watch part 2 showcasing torque, elastic collisions, and ramp kinematics.
(Note: Videos are located in the /assets folder of this repository)
The sandbox features four distinct, mathematically accurate laboratories:
Explore the relationship between string length, gravity, and timing.
- Interactive: Drag the bob to a precise starting angle and release.
-
Theory: Live calculation of the Ideal Period:
$T = 2\pi\sqrt{L/g}$ . - Dynamics: Real-time visual rope calculation connecting the anchor to the bob.
Test the laws of motion on a frictionless or high-friction ramp.
- Interactive: Pivot the ramp and release projectiles from the absolute summit.
-
Theory: Live Vertical Height (
$h = L \sin \theta$ ) and Final Velocity ($v = \sqrt{2gh}$ ) readouts. - Precision: Trigonometrically aligned spawning ensures the ball strikes the ramp surface flawlessly.
A heavy-duty, ultra-stable lever for demonstrating moments and balance.
-
Interactive: Drop precise weights at fixed distances (
$r=4.5$ ) from the fulcrum. - Stability: High angular damping and mass ratios ensure a smooth, realistic dip rather than a bouncy simulation.
-
Theory: Real-time Torque readout:
$\tau = r \times F$ .
Visualize restitution and energy loss in a controlled environment.
- Interactive: Set a custom initial Drop Height and watch the balls collide.
-
Customization: Adjust the coefficient of restitution (
$e$ ) from perfectly inelastic to super-elastic. -
Theory: First Rebound Height calculation:
$h_1 = h \cdot e^2$ .
- Framework: React 19 + TypeScript
- Build Tool: Vite
- 3D Engine: Three.js via
@react-three/fiber - Physics Engine: Cannon.js via
@react-three/cannon - UI Components: Lucide-React + Glassmorphic CSS Logic
- Helpers:
@react-three/drei(Environment, Shadows, Controls)
- Node.js (v18+)
- npm / yarn
-
Clone the repository:
git clone https://github.com/sanudking/gsoc.git cd gsoc -
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Build for production:
npm run build
- Studio Environment Lighting: Soft shadows and reflections for a premium feel.
- Zero-Drop Spawning: Avoiding physics engine artifacts by intelligently placing objects.
- Glassmorphism: A modern, translucent UI that floats over the 3D scene without obstructing it.
Developed as a high-fidelity interactive physics demonstration for GSoc 2026.