Photorealistic architectural renders in the browser with Three.js, lightmaps, and BVH raycasting
The 3D Architectural Visualization framework gives architects, real estate developers, and visualization studios the AI prompt system to build photorealistic, interactive architectural experiences that run in the browser — no plugin, no download, no app store. Built on Three.js with three-mesh-bvh for performance-critical raycasting and collision detection, the framework covers the complete architectural visualization stack: loading GLTF models with baked lightmaps, building first-person navigation with collision-aware movement, implementing a dynamic day/night cycle with a physically-based sky shader, and adding the interactive measurement and annotation tools that make browser-based arch-viz genuinely useful for client presentations.
Full Access Unlocked
All 45 prompts · All 5 modules
"The BVH first-person navigation prompt is the most complete browser walkthrough implementation I've ..."
Architectural Visualization Director · Top-20 arch-viz studio
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.
5 modules · 45 prompts · 5 workflow stages
Model Loading & Lightmaps
GLTFLoader with UV2 lightmap channel, MeshStandardMaterial lightMap and lightMapIntensity, Draco compression, and progressive loading with LOD
9 promptsNavigation & Collision
three-mesh-bvh BVHGeometry setup, first-person controller with WASD + mouse look, collision sphere cast, step-up detection, and gravity simulation
10 promptsDay/Night & Lighting
Dynamic DirectionalLight sun position from azimuth/elevation, sky shader (THREE.Sky), shadow map cascade updates, ambient light curve, and interior light toggle
9 promptsMaterials & Environment
PBR material library for concrete, wood, glass (MeshPhysicalMaterial transmission), water animated shader, and terrain with texture splatting
10 promptsInteractive Tools
Click-to-measure raycasting with distance display, area polygon tool, annotation pin system, floor plan orthographic minimap, and room label overlay
7 promptsWrite a first-person navigation controller for a Three.js architectural visualization using three-mesh-bvh for collision detection. Requirements: (1) Setup: after loading the GLTF scene, merge all static geometry into a single BufferGeometry, compute a BVH: geometry.computeBoundsTree() (from three-mesh-bvh). Create a Mesh with this geometry as the collision mesh (invisible, no material needed for rendering). (2) Player state: position (THREE.Vector3), velocity (THREE.Vector3), onGround (boolean), eyeHeight: 1.7. (3) Input: WASD for movement direction, mouse delta for yaw/pitch (PointerLockControls or manual Euler). Space to jump (add velocity.y = 5 if onGround). (4) Each frame (delta): apply gravity (velocity.y -= 9.8 * delta), compute movement vector from input + yaw rotation, attempt to move player by casting a capsule (use bvh.capsuleIntersect or sphere cast at feet and head). If collision detected, project movement along collision normal (slide). Check if feet sphere intersects ground — set onGround = true, zero velocity.y. (5) Step-up: if forward movement is blocked but a sphere cast 0.4m higher is clear, smoothly lerp player.y up by the step height. (6) Export as FirstPersonController class with update(delta) and attach(scene) methods. Include the three-mesh-bvh import and setup code. Full TypeScript.
Write a Three.js dynamic day/night cycle system for an architectural visualization. Requirements: (1) THREE.Sky setup: add Sky mesh to scene, set sky.scale.setScalar(10000). Configure sky.material.uniforms: turbidity: 10, rayleigh: 3, mieCoefficient: 0.005, mieDirectionalG: 0.7. (2) Sun position: accept azimuth (0–360°) and elevation (-10°–90°) parameters. Compute sun direction vector: phi = THREE.MathUtils.degToRad(90 - elevation), theta = THREE.MathUtils.degToRad(azimuth), sun.setFromSphericalCoords(1, phi, theta). Update sky.material.uniforms.sunPosition.value = sun. (3) DirectionalLight: position the light at sun direction * 100. Update shadow camera frustum to cover the scene bounds. Call renderer.shadowMap.needsUpdate = true when sun moves. (4) Ambient light: lerp AmbientLight intensity from 0.05 (night) to 0.4 (noon) based on elevation. Change color from deep blue (#0A1628) at night to warm white (#FFF5E0) at noon. (5) Time animation: expose a setTime(hours: 0–24) method that maps hours to azimuth/elevation using a solar position formula (provide simplified formula). Animate with GSAP: animateTo(targetHours, duration). (6) Interior lights: expose toggleInteriorLights(on: boolean) that fades a set of PointLights in/out — useful for evening mode. Full TypeScript.
system
19 prompts
workflow
10 prompts
templates
9 prompts
prompts
7 prompts
"The BVH first-person navigation prompt is the most complete browser walkthrough implementation I've seen. The capsule cast collision, slide-along-normal movement, and step-up detection — all three are what separates a real walkthrough from a demo that clips through walls."
Architectural Visualization Director
Top-20 arch-viz studio
"The day/night cycle system with the solar position formula and interior light toggle is what our clients use to show properties at different times of day. The GSAP animateTo(targetHours) API made it trivial to add a time-of-day slider to the UI."
PropTech CTO
Real estate platform, 2M monthly users
All 45 prompts across 5 modules are unlocked for your account.
Lifetime access