How to Play

1. Choose Your Ball: Use the top-left menu to pick between a Soccer Ball, Basketball, Bowling Ball, or Tennis Ball. Each boasts unique physical properties like mass, friction, and bounciness.
2. Master the Spin (Impact Point): Click the circular target area in the control panel. Striking the center yields a straight shot, while off-center kicks impart realistic topspin, backspin, or sidespin through generated torque.
3. Aim and Fire: Inside the 3D viewport, click (or tap) and drag your cursor away from the ball. The resulting red line dictates your power and trajectory. Release to unleash your kick!
4. Track the Stats: Watch the live telemetry in the top-right corner to monitor your ball's speed, peak altitude, air time, and bounce count.

Under the Hood (Technical Details)

This high-performance simulation utilizes modern web standards to deliver a seamless mobile and desktop experience:

• Three.js: Powers the WebGL rendering, providing smooth 3D visuals, dynamic shadows, and translucent room boundaries.
• Cannon.js: A robust physics engine calculating real-time collision detection, restitution (bounciness), friction, torque, and rotational damping.
• Performance Optimized: Engineered with passive event listeners, debounced render pipelines, and minimal main-thread blocking to guarantee a fluid frame rate (low INP) across mobile and desktop devices.

Future Roadmap

We are constantly looking to improve the simulation. Upcoming features may include:

• Precision Targets & Scoring: Dynamic hoops, goals, and moving targets to test your accuracy.
• Environmental Mechanics: Adjustable wind resistance, terrain textures, and varying gravity environments (e.g., lunar gravity).
• Immersive Audio: Spatially mapped sound effects for collisions, bounces, and net swishes.