
Creating Zagreb at Morning, Noon, and Night with Codex 🌅🚋🌙 From a Blender City to a Nighttime Stroll in Three.js
This time, I recreated Zagreb’s Ban Jelačić Square in Blender and captured it in three different moods: morning, noon, and night 🌅🚋🌙
First, an important note! What you see here is not a real photograph, but a rendering of a 3D scene I created. It is not a complete digital copy of the actual location, either. It is a city still in progress, built with reference to 360-degree photos and maps.
Still, it is pretty fun how much the atmosphere of the same city can change just by changing the light…! ✨
Morning: a slightly quiet time before the city wakes up 🌅

For the morning scene, I used warm low-angle light to cast long shadows across the buildings. A bronze horse and café tables that still look a little sleepy. There is something about an empty square that makes you want to take a walk, isn’t there? ☕
This is not an exact reconstruction of “Zagreb at 6:45 a.m. on that particular day”; it is a shot with lighting adjusted to evoke morning. For the lightly overcast sky, I used a background created earlier with an image-generation feature.
Noon: blue trams become part of the city’s color 🚋💙

The star of the daytime scene is Zagreb’s iconic blue tram! I made an approximate model based on the TMK 2200, placed another one on the other track, and arranged them side by side facing opposite directions.
I modeled not only the body, but also the articulated section, windows, doors, wheels, rooftop equipment, and pantograph as separate shapes. That said, it is not yet a precision model built directly from the real vehicle’s blueprints, so there is still plenty of room to improve 🔧
For daytime, I used soft overcast lighting so the blue tram bodies and stone cityscape would read clearly. Rather than floating the trams in a merely plausible location, I positioned them along track centerlines extracted from map data.
Night: streetlights, stars, and reflections on the cobblestones—my favorite 🌙✨

Personally, night is my favorite! I combined warm streetlights with cool blue moonlight and gave the cobblestones slightly wet-looking reflections. This is an atmospheric artistic choice, not a reconstruction of the weather on the day the reference photos were taken.
The streetlights are not just glowing images pasted onto the scene: I defined the 3D fixture models separately from the light sources that illuminate their surroundings. I could confirm 39 streetlights from the map. Of the 14 recorded as four-lamp fixtures, I added spiral decorations and suspended globe lamps based on photographs.
The stars are also part of a stylized sky rather than their actual constellation arrangement. But they really help create the feeling of walking through the city at night…! 🌌
The actual workflow looked something like this 🛠️
I carried out all production work through Codex. Blender was operated with Python via MCP, rendering and screenshots were used for review, and the article and images were published using the yasue.org API.
- Building the city’s foundation: Referenced 360-degree photos, imported OpenStreetMap building outlines and tracks, and turned the surrounding buildings into 3D forms.
- Refining the details: Rebuilt the equestrian statue’s horse neck, face, and legs, along with the figure’s arms, military uniform, and inscription plaque on the pedestal. At one point, I misread the direction of the legs from close-up photos and corrected it after checking a full-body photo.
- Adjusting the café seating: I briefly interpreted “make the tables and chairs ten times more numerous!” as 200 tables and 400 chairs—definitely too many 😂 In the end, I reduced it to 60 tables and 120 chairs, grouped in four areas in front of the shops.
- Stairs and streetlights: Added stairs that appeared on the map but had been omitted from the model. I also moved the streetlights from arbitrary even spacing to their positions on the map.
- Capturing morning, noon, and night: Changed the camera position, light colors, brightness, and reflections, then rendered the same 3D scene. These are not images where AI repainted a city over CG.
My takeaway this time was that “adding more” and “making it feel like the real place” are different things. Rather than scattering huge numbers of tables around, packing them tightly in front of the shops made the city feel more authentic ☕✨
Next: walking through the city at night in Three.js 🎮
I have also implemented a Three.js viewer with this Blender model, fixed at night. I converted the model to GLB format and compressed the data for the browser. It includes buildings, café furniture, the statue, and two trams.
You can move with WASD, look around with the mouse, and hold Shift to walk faster. I also added simple collision detection for buildings and furniture. Since calculating all the lights at once would be too heavy, the viewer prioritizes nearby streetlights.
The web version is currently being prepared as a private preview for myself. The images in this article are from the Blender version, and image quality and reflections will not be exactly identical in the Three.js version.
Or open it here:
https://ja.yasue.org/embed/2026-09-06/2956db8fb61c85ad/index.html
A few things that are not finished yet, honestly 📝
The equestrian statue has not yet reached photorealism indistinguishable from the real thing, and the building decorations still include repetition and estimation. The number and placement of café seats, the height of elevation changes, and some streetlight shapes are also approximations. The map data was obtained in 2026, while the reference photos are from 2016, so there is a time gap as well.
Rather than an article showing off a finished city, this is a record of creating, comparing, refining, and changing the light with Codex. I think the most interesting part is watching the city gradually take on its own character this way 🌃
References 🔗
- 360Cities: 360-degree photo of Ban Jelačić Square from 2016
- Equestrian Statues: full-body and close-up photos of the Jelačić equestrian statue
- Good Free Photos: reference for the east side of the square, streetlights, and rooftop signs
- OpenStreetMap: map data copyright and license
- Official Three.js documentation
Map data: © OpenStreetMap contributors, ODbL. I have not republished the reference photos themselves. The three images shown here were output from the Blender scene created for this project.



