Browser-native 3D game interfaces with R3F, Rapier physics, instanced particles, and spatial audio
Immersive 3D Game UI & HUD is the AI prompt framework for developers building browser-native 3D games and interactive experiences that need the full game development stack — physics simulation, spatial audio, particle effects, and game state management — running at 60fps in a React Three Fiber application. Every prompt is engineered around the specific architecture of browser game development: the fixed-timestep physics loop that prevents simulation drift, the instanced particle system that renders thousands of hit effects without frame drops, the spatial audio graph that makes sound feel three-dimensional, and the Zustand game state machine that manages the full complexity of game progression.
Full Access Unlocked
All 47 prompts · All 6 modules
"The instanced particle pool prompt is the architecture I wish I had at the start of my project. The ..."
Indie Game Developer · Browser game, 180K monthly players
Need expert implementation?
Hire an OrchestratorConnect with a certified Prompt.Doctor Orchestrator to deploy this framework for you.
No coding required. You will use ChatGPT or Claude as your AI tool. Follow these steps in order — do not skip ahead.
Purchase & download the framework
Click the buy button on this page. After checkout, go to the and hit Download .zip. Unzip it — you'll get a .md file (the full framework) and a .pdf (easy to read reference). Keep both open.
Open your project — new or existing
This dashboard is designed to integrate into any existing project or be built as a standalone app. If you already have a site in Airo (or Cursor, Bolt, etc.), open that project. If you're starting fresh, create a new project. The Orchestrator Prompt handles both cases — it scans what's already there and adds only what's missing.
Paste the Orchestrator Prompt into your builder's chat
Open the on this page. Copy the Orchestrator Prompt and paste it into your AI builder's chat. It will scaffold the full admin system — secure login, email marketing module, booking engine, and CMS — on top of your existing codebase. This takes 2–5 minutes.
Add your API keys as secrets
Critical — Novice UsersIn your builder, go to Settings → Secrets and add the keys your app needs. For this framework: STRIPE_SECRET_KEY (for booking payments — get it from your Stripe dashboard), ANTHROPIC_API_KEY (for AI-assisted content — get it from console.anthropic.com), and DATABASE_URL (your MySQL connection string). No key is needed for the admin login, CMS, or email modules — those run on your existing infrastructure.
Don't have a MySQL server?
You can purchase a shared hosting plan with cPanel and MySQL at host.esgwon.dev. Once your account is set up, follow the step-by-step guide to create your database and connect it to your AI website builder.
How to set up cPanel MySQL & connect to your AI website →Need help with Stripe?
Get your STRIPE_SECRET_KEY and STRIPE_PUBLISHABLE_KEY from your Stripe dashboard. The guide covers test keys, webhook setup, and going live.
Need help with Anthropic?
Get your ANTHROPIC_API_KEY from console.anthropic.com. The guide covers model selection, cost management, and troubleshooting.
Prompting Airo after setup — always name the file
When asking Airo to add tables, columns, or features to the admin dashboard, always include src/server/lib/admin-db.ts in your prompt. Without it, Airo may target the wrong database. Example: "Add a bookings table in the admin database (src/server/lib/admin-db.ts) — do not touch any other database connection in this project."
Run the framework prompts inside your live app
Your app is now running in the builder's preview panel. Open the on this page, copy each prompt one at a time, and paste it into your builder's chat. Replace every [BRACKET] with your real data before sending. Work through the stages in order — each stage output feeds the next.
Test end-to-end, then publish or hand off to your client
Walk through the admin as a real user: log in, create a booking, send a test email campaign, update a CMS image, and run the Safe-to-Publish gate. Once everything passes, click Publish in your builder. Because this is a white-label dashboard, your client accesses it at /admin on their own domain — no Prompt.Doctor branding, no third-party login required.
6 modules · 47 prompts · 6 workflow stages
Game Loop & Physics
Fixed-timestep loop with accumulator pattern, @react-three/rapier Physics provider, rigid body types, collider shapes, and collision event handlers
9 promptsSpatial HUD
World-to-screen position projection, Drei Html for 3D-anchored UI, health bars above enemies, waypoint markers, and damage number popups
9 promptsParticle Effects
Instanced particle pool for hit sparks, explosion burst, muzzle flash, ambient dust, and trail effects — all GPU-instanced with object pooling
9 promptsSpatial Audio
Web Audio API AudioContext, PannerNode for 3D positional audio, Doppler shift calculation, reverb ConvolverNode for zones, and audio pool for rapid fire sounds
8 promptsInput System
Keyboard input map with configurable bindings, Gamepad API polling with dead-zone normalization, touch virtual joystick, and input action abstraction layer
7 promptsGame State Machine
Zustand game store: player stats, enemy registry, inventory system, level state, and game phase FSM (menu → playing → paused → game-over)
5 promptsWrite a React Three Fiber instanced particle system for game hit effects. Requirements: (1) ParticlePool class: manages a fixed pool of 2000 particles using InstancedMesh with SphereGeometry(0.04, 4, 4) and MeshBasicMaterial({ color: "#FF6600", transparent: true, depthWrite: false, blending: THREE.AdditiveBlending }). All inactive particles are scaled to 0 (hidden). (2) Particle data: store in parallel Float32Arrays — positions (x,y,z), velocities (x,y,z), lifetimes (current, max), scales (current, target). Use a nextIndex pointer with wrap-around for O(1) allocation. (3) Spawn API: spawnBurst(origin: THREE.Vector3, count: number, speed: number, color: THREE.Color) — allocates `count` particles from the pool, sets random velocities in a hemisphere facing the camera, lifetime 0.3–0.6s, initial scale 1.0. (4) Update in useFrame(delta): for each active particle, apply velocity, apply gravity (0, -9.8, 0) * delta^2 * 0.5, decay lifetime, lerp scale to 0 as lifetime approaches 0, update the InstancedMesh matrix and color via setMatrixAt / setColorAt. Call instancedMesh.instanceMatrix.needsUpdate = true. (5) Export as useParticlePool hook returning { spawnBurst, spawnTrail, spawnAmbient }. Full TypeScript.
Write a spatial audio system for a browser 3D game using the Web Audio API. Requirements: (1) AudioManager class: creates a single AudioContext (resumed on first user gesture). Maintains a pool of 32 AudioBufferSourceNode + PannerNode pairs for rapid sound playback without allocation. (2) PannerNode config: panningModel: "HRTF", distanceModel: "inverse", refDistance: 1, maxDistance: 50, rolloffFactor: 1.5. (3) play3D(soundId: string, position: THREE.Vector3, options?: { volume, pitch, loop }): get a free source from the pool, set panner.positionX/Y/Z to the world position, set playbackRate for pitch, connect source → panner → gainNode → context.destination, call start(). (4) updateListener(cameraPosition: THREE.Vector3, cameraForward: THREE.Vector3, cameraUp: THREE.Vector3): update context.listener.positionX/Y/Z and context.listener.forwardX/Y/Z and upX/Y/Z each frame. (5) Doppler: compute velocity of sound source each frame (position delta / dt), set panner.positionX/Y/Z.setValueAtTime with a small lookahead for smooth Doppler. (6) Reverb zone: createReverbZone(bounds: THREE.Box3, impulseResponse: AudioBuffer) — when listener enters bounds, crossfade a ConvolverNode into the signal chain over 500ms. (7) preload(manifest: Record<string, string>): fetch and decode all audio files, store in a Map<string, AudioBuffer>. Full TypeScript.
system
17 prompts
workflow
14 prompts
templates
9 prompts
prompts
7 prompts
"The instanced particle pool prompt is the architecture I wish I had at the start of my project. The O(1) allocation with a nextIndex pointer — instead of filtering for inactive particles every frame — is the optimization that took my hit effects from 45fps to 60fps."
Indie Game Developer
Browser game, 180K monthly players
"The spatial audio system with HRTF panning transformed our gamified brand experience. The reverb zone crossfade — entering a different space and hearing the acoustics change — is the detail that makes clients say "how did you do that?""
Interactive Experience Director
Brand activation studio
All 47 prompts across 6 modules are unlocked for your account.
Lifetime access