Create a complete, standalone 3D interactive physics simulat...

Prompt

Create a complete, standalone 3D interactive physics simulation in a single HTML file using Three.js (via CDN ES Modules/import maps) and OrbitControls. Subject: Real-Time CPU Cloth Physics Engine with Dynamic Buffer Geometry Updates and Rigid Body Collisions. Strict Technical & Architectural Constraints: 1. Physics Engine (No External Libraries like Cannon.js or Rapier): - Implement a custom 2D particle grid (minimum 25x25 vertices) using Verlet Integration inside the animation loop. - Define structural, shear, and bending distance constraints. Perform at least 5 relaxation constraint iterations per frame for spring stability. - Include global forces: Gravity vector, air resistance/damping coefficient, and a dynamic wind vector driven by Math.sin(time). 2. Direct Geometry Buffer Mutation: - Construct a THREE.BufferGeometry with custom vertex positions, index faces, and UV mapping. - On every frame, directly mutate the Float32Array under `geometry.attributes.position.array`. Do NOT recreate the geometry or reallocate arrays. - Flag `geometry.attributes.position.needsUpdate = true` and call `geometry.computeVertexNormals()` efficiently. 3. Interactivity & Collision Detection: - Place an animated metallic collider sphere in the scene moving procedurally through the cloth. - Implement continuous analytical sphere collision detection: if a cloth particle penetrates the sphere radius, project its position to the sphere surface ($\vert{}\vert{}p - c\vert{}\vert{} < r$). - Setup THREE.Raycaster to allow the user to click and drag cloth vertices in 3D space along an unprojected camera plane. Double-clicking a vertex toggles its pinned/unpinned state. 4. Garbage Collection & Memory Optimization (Micro-Benchmark Edge Case): - ZERO memory allocations inside the `requestAnimationFrame` render loop. Re-use pre-allocated `THREE.Vector3` and `THREE.Matrix4` instances for all physics, raycasting, and collision calculations to prevent Garbage Collection (GC) frame drops. - Implement a fixed delta time accumulator loop for deterministic physics steps regardless of monitor refresh rate (60Hz vs 144Hz). 5. Materials & Presentation: - Render the cloth with double-sided rendering (`THREE.DoubleSide`) using a MeshStandardMaterial with high roughness and custom wireframe toggle button in the UI. - OrbitControls with smooth damping and camera collision prevention.