3D Physics Visualization Skill

Expert guidance for building high-performance 3D physics simulations using Three.js, React Three Fiber, Drei, and react-three/rapier. This skill provides comprehensive workflows for both client-side physics and backend-driven physics visualization architectures.

When to Use This Skill

Activate this skill when the user asks about:

• Creating 3D scenes, environments, or visualizations with Three.js or React Three Fiber
• Adding physics simulations (gravity, collisions, rigid bodies, joints)
• Building backend-driven physics visualization (backend computes, frontend renders)
• Working with WebGL, 3D graphics, or rendering pipelines
• Optimizing 3D performance (frame rates, memory management, LOD)
• Implementing camera controls, lighting, shadows, or materials
• Using Drei helpers (OrbitControls, Environment, Html, etc.)
• Debugging Three.js applications or physics behavior
• Setting up real-time synchronization via WebSocket for physics state
• Creating interactive 3D objects, animations, or user interactions