Impact Lab: Real-Time 3D Physics & Destruction

Dive into high-fidelity physics with this interactive simulation built on Three.js and Cannon-es. Explore two distinct modes: Bullet Impact, featuring precision crosshair targeting, and Grid Smash, a high-velocity structural collision. With adjustable grid densities and physics parameters, this lab is an experimental playground for real-time voxel destruction and collision dynamics.

Click here to access.

1. The Core Engine

The logic is driven by a high-performance Rigid Body Physics Engine (cannon-es.js).

• World Integration: The engine maintains a mathematical world independent of the visuals. It calculates factors like gravity, air friction, and restitution (bounciness).
• Discrete Time Stepping: The engine uses a fixed timeStep of 1/60 seconds. This ensures that even at high velocities, the collision detection remains stable and prevents objects from "teleporting" through one another.
• Collision Detection Phases:
  • Broadphase: The engine first checks which objects are in proximity.
  • Narrowphase: It then performs precise vertex-to-vertex calculations for impact.
• Sleep States: To optimize performance, the engine puts cubes to "sleep" (body.sleep()) when they aren't moving. They only consume CPU cycles again once a force—like a bullet—wakes them up.

2. Rendering Technology

Visual output is handled by Three.js, utilizing modern WebGL 2.0.

• Immediate Mode Rendering: The animate() loop continuously copies coordinates from the physics bodies to the visual meshes (o.mesh.position.copy(o.body.position)).
• PCFSoft Shadows: It uses Percentage Closer Filtering (PCF) to create soft, realistic shadows on the pastel floor, adding depth to the 3D scene.
• Fog for Depth: A subtle Fog effect is applied to the background. This creates a clean "infinity" horizon that focuses the user's eye on the center of the lab.

3. Mathematical Tools

The simulation relies heavily on 3D Vector Algebra and Quaternion Math.

• Vector Subtraction & Unit Vectors: When firing a bullet, the engine calculates the trajectory using vector subtraction:

• This ensures the bullet travels in a straight line toward the target regardless of the starting distance.
• Quaternions: Instead of standard rotation angles (Euler), the engine uses Quaternions (x, y, z, w) to handle the chaotic spinning of cubes after an impact. This prevents "Gimbal Lock," where a 3D object gets stuck in a specific orientation.
• Trigonometry: The aim sliders use linear translation to position the targetMarker in 3D space, which the user sees as a crosshair before firing.

4. Front-End Environment

The interface is a Responsive Single Page Application (SPA) designed with a pastel "Scientific Journal" aesthetic.

• Import Maps: This modern browser feature allows the application to load heavy libraries directly from CDNs (Content Delivery Networks) using standard import syntax without needing a build tool like Vite or Webpack.
• Grid System UI: The control panel uses CSS Grid (grid-template-columns: 1fr 1fr) to remain usable on both desktop and tablet screens.
• HUD (Heads-Up Display): The "Annotation" panel uses backdrop-filter: blur() to provide a clear, floating overlay that describes the current simulation state without obscuring the 3D action.
• Integrity Guard: A security function (_chk_sys) monitors the DOM for tampering. If the attribution link to hilmybox.com is hidden or modified, the environment immediately halts the simulation and clears the 3D scene to protect the developer's IP.