If you ever wanted to create a full 3D interactive building simulation, complete with time-controlled lighting, moving people, heatmaps, energy data, and floor-by-floor inspection. You can now do it with no manual coding at all.
Just open Gemini 3, paste in the prompts below, let it generate the full codebase, and drop everything into Visual Studio Code.
Hit Go Live, and you’ll have a futuristic Three.js dashboard running in your browser.
Below is the full prompt for Gemini 3.
It will generate a complete modern web app: Three.js 3D scene, Tailwind dashboard, time system, floor extraction logic, interactive room highlighting, energy modes, heat-comfort visualization, underground garage, and more.
Let’s jump in. 🚀
Prompt:
Build a Fully-Interactive 3D Office Campus Web App
Goal:
Create a polished, futuristic, bright-looking Three.js interactive office building simulator, with a Tailwind CSS dashboard and multiple data-driven modes.
⸻
Technology & UI
• Use Three.js for the 3D scene.
• Use Tailwind CSS for the UI dashboard (float on the left, compact and dense).
• Right side = fullscreen 3D; left = tabs + sliders + toggles.
• Visual style: bright, modern, slightly “sci-fi” with bloom/tonemapping.
• The environment and main building should appear clearly lit, not dark.
⸻
3D Scene Setup
• Procedurally generate a modern office building with interior rooms, partitions, and different functional zones.
• Add simple surrounding buildings + roads (low-poly is fine).
• Add a lobby on the first floor with:
• a reception bar
• a central core (elevators + stairs) spanning all floors
• Underground parking garage directly beneath the building.
Interior Details
• Floor partitions to separate office/meeting/pantry/core/etc.
• Office furniture (gray models; white blends too much):
• desks, chairs
• meeting tables + TV
• pantry with water bar
• People = red-tinted 3D human proxies
• No people in parking
• Ensure character feet sit exactly on the floor (no floating).
⸻
Dashboard Controls (Tailwind)
Three Tabs
1. People
2. Environment
3. Energy
24-Hour Time Slider
Controls:
• Sun position
• Window emissive intensity (night mode)
• People distribution per time period
• Shows external environmental metrics (simulated is ok):
• temperature
• humidity
• wind speed
• solar radiation
View Modes
1. Default: PBR realistic materials
2. Heatmap: comfort shown as colored volumetric blocks
3. People view: highlights human density + zones
⸻
Behavior Logic
People Simulation
• Distribution changes visibly with time:
• Work hours → more in offices + meeting rooms
• Lunch → more in pantry / rest areas
• Not just numbers — 3D positions change dynamically
Energy Mode
Show breakdown by:
• cooling
• heating
• lighting
• equipment
• hot water
Parking energy includes only lighting + equipment.
⸻
Interactive Features
1. Floor “Drawer” Extraction
• Clicking a floor pulls it out like a drawer
• Extraction direction:
• along the short side
• rotated 90° clockwise
• Extracted floor = opaque, not transparent
• Extracted floor = highlighted; other floors dim
2. Room-Level Interaction
• Clicking a room should:
• highlight only that room
• remove previous ugly yellow wireframe
• no highlight when nothing is selected
• Add toggle buttons to show functional zones using color blocks.
3. Parking Visibility Toggle
• Hide the ground plane when viewing the parking garage
• Parking features:
• painted parking lines
• cars placed without overlap
⸻
Environment & Heat-Comfort
• Use colored volumetric blocks for comfort visualization
• No Z-fighting with floors or ground
• Fix overflow bug (Level 1 comfort cube extruding outside the building)
⸻
Visual & Functional Improvements
• Scene must be brighter
• Remove neighbor building that obstructs floor extraction
• People models more red for clarity
• No transparency for extracted objects
• Furniture uses gray only
• Roof splitting bugs fixed
• Heat-comfort mode limited properly inside geometry
⸻
Acceptance Checklist
Gemini should generate code that satisfies:
✔ Sun + time slider updates lighting + emissive windows
✔ People distribution changes visibly by time
✔ Heatmap uses volumetric blocks
✔ Floor extraction is correct (short side, 90° CW, opaque)
✔ Room highlights on click only
✔ Parking visible only after hiding ground
✔ Cars do not overlap
✔ Red people models grounded correctly
✔ Energy breakdown fully functional
✔ Bright scene with “cool” futuristic visual style