# Real-Time Voxel City Simulation

- Author: @cfenghub
- Card: Creator prompt
- Theme: Dioramas & voxel scenes
- Stack: Not rebuilt
- Interaction: Pointer
- Licence: Credited link (Shared publicly by the author; full text with credit, removed on request)
- Verified: not yet
- Original post: https://x.com/cfenghub/status/2116350947467440157

## Original prompt

```text
### 1. Project goal

You are a senior Three.js engineer, 3D technical artist, and city simulation game designer.

Create a complete, visually polished voxel-style 3D city simulation world from scratch that runs in real time.

Project name: **VOXEL CITY — BUILD · LIVE · GROW**

This is a functioning miniature city, not a static render.

The city must include real 3D buildings, a continuous road network, vehicles, pedestrians, schools, hospitals, commercial districts, parks, overpasses, and waterfront scenery. Cars must keep moving, pedestrians must travel along the roads, traffic signals must cycle, and fountains and water surfaces must remain animated.

Users must be able to freely orbit, pan, and zoom the camera to explore different areas of the city, click buildings to view information, and control whether the simulation is paused or running and at what speed.

Use high-quality voxel city-building games and finely crafted miniature city models as the overall visual reference. The result should be bright, full-bodied, natural, and richly colored, with clear depth and finely detailed buildings.

**Core principle: Keep the city compact rather than making it large; every area should have content, every important element should be easy to identify, and the city must genuinely keep running.**

Do not output a design report or implementation plan first. Generate the complete project directly.

---

### 2. Runtime environment and delivery requirements

These are hard requirements with the highest priority.

1. Deliver one complete `index.html` file.
2. Prefer HTML, CSS, vanilla JavaScript, and Three.js.
3. The user must not need to install Node.js, run npm, start Vite, compile anything, or configure a local server.
4. Make every effort to ensure that the HTML file runs when opened directly in a browser.
5. Do not depend on additional downloaded 3D models, textures, images, fonts, or audio files. Generate city assets primarily with procedural geometry and materials.
6. Stable CDN dependencies are allowed, but account for the limitations of opening `file://` directly in a browser, including ES Modules, cross-origin resources, and local files. Prefer loading methods that have been tested in practice; do not assume that every browser environment allows module loading.
7. Do not use static images, video overlays, or prerendered animations as the 3D city itself.
8. Do not use button styling to fake functionality.
9. All major animations must be driven by real-time JavaScript updates.
10. If the current Arena environment supports live HTML previews, create and validate the project directly. If the current environment has runtime limitations, clearly state the specific limitations and do not claim that the project ran successfully.
11. The code must be complete. Do not provide only snippets, pseudocode, or sections the user must fill in.
12. Within the available development budget, prioritize a page that starts, a complete scene, a working camera, and functional dynamic systems before adding extra decoration.

Important: If the current execution environment is incompatible with a particular Three.js loading method, use a practical alternative that works. Do not deliver a blank page just because dependency loading failed.

---

### 3. Overall art direction

Build a colorful, bright, natural voxel city with clear details.

Visual keywords:

- A sunny daytime setting.
- High-quality voxel geometry.
- A finely crafted miniature cityscape.
- Clear building silhouettes.
- Rich but orderly colors.
- Natural light and shade.
- A clear road layout.
- Vivid green spaces and vegetation.
- Distinctive buildings.
- Soft but visible shadows.
- A convincing sense of spatial depth.
- A complete game-quality scene, not a crude blockout test environment.

The style should be close to a carefully crafted voxel city simulation game: retain the geometric appeal of building blocks while adding rich material variation and visual depth.

**Do not use a dark, oppressive, cyberpunk, or post-apocalyptic style.**

Also, do not interpret “bright” to mean that every object must be washed out.

Do not use large areas of pure-white buildings, low-contrast gray-white roads, pale mint-green grass, or a scene bleached by intense ambient light.

The scene must be clear, richly colored, and dimensional.

---

### 4. Mandatory color specification

This is an important acceptance criterion for the project.
Follow the color assignments below strictly.
#### 4.1 Sky and environment

- Sky: a clear medium-light blue.
- Distant environment: natural and fresh, without heavy white fog.
- Water: a blue-green hue clearly distinct from the sky.
- Clouds: a small number of soft white clouds that do not obscure much of the city.
- Sunlight: bright and natural, without overexposure.

#### 4.2 Buildings

Buildings must have clearly differentiated colors.

Residential areas should use warm white, beige, brick orange, coral red, pale yellow, mint green, and similar colors.
Commercial areas should use modern urban colors such as blue-gray glass, off-white facades, warm orange accents, and teal glass curtain walls.
Schools should use easy-to-recognize colors such as warm yellow, orange, red, or blue, and include a playground and educational facilities.
Hospitals should use clean warm white and pale blue, with prominent red medical markings.
Industrial buildings should use neutral gray, brick orange, blue, and similar colors, with recognizable warehouses and logistics facilities.
Landmark buildings may use blue-gray glass, warm-white facades, and restrained gold accents.
**Do not turn every building in the city into an identical pure-white block.**
Differentiate buildings through hue, value, shape, roofs, and facade details.

#### 4.3 Roads and ground

- Use clear medium gray or dark medium gray for roads.
- Use clean white or pale yellow for lane markings.
- Use neutral gray sidewalks that are slightly lighter than the roads.
- Curbs must have clear boundaries.
- Use vivid, natural medium-bright green for lawns.
- Use multiple shades of green for tree canopies.
- Parking spaces, intersections, turn arrows, and stop lines must be clearly visible.

Roads must be clearly distinct from the surrounding ground and must not blend into a washed-out background with the buildings.

#### 4.4 Vehicles

Use varied colors for vehicles, including red, yellow, blue, green, and white.
Buses, ambulances, fire trucks, delivery trucks, and ordinary cars must be distinguishable at a glance.
Use darker colors for tires and contrasting blue-gray or dark gray for windows; avoid making an entire vehicle a single pale color.

#### 4.5 UI color scheme

Use a modern city simulation game HUD style for the interface.
You may use deep ocean blue, navy, white, light gray, and small amounts of green and orange as functional accent colors.
The UI should contrast appropriately with the city scene without drawing too much attention.
Transparent panels must keep text legible; do not let background colors interfere with reading through transparency effects.
```

Not rebuilt by 3dmotion yet. Credit stays with @cfenghub.

Prompt by @cfenghub (https://x.com/cfenghub/status/2116350947467440157) via 3dmotion.io/e/real-time-voxel-city-simulation