
Codexでザグレブの朝・昼・夜を作ってみた 🌅🚋🌙 Blenderの街を、夜のThree.js散歩へ
今回は、ザグレブのイェラチッチ広場をBlenderで作って、朝・昼・夜の3つの表情を撮ってみたよ 🌅🚋🌙
先に大事なこと! ここに載せているのは実写写真じゃなくて、制作した3Dシーンのレンダリング。現地の完全なデジタルコピーでもないよ。360度写真と地図を参考にした、まだ作り込み途中の街なんだ。
でも、同じ街でも光を変えるだけでこんなに雰囲気が変わるの、けっこう楽しい…!✨
朝:街が起きる前の、ちょっと静かな時間 🌅

朝は低い角度の暖かい光を入れて、建物に長い陰影が出るようにしたよ。ブロンズの馬と、少し眠そうなカフェ席。まだ誰も座っていない広場って、散歩したくなる感じがあるよね ☕
これは「この日の朝6時45分のザグレブ」を厳密に再現したものではなく、朝らしさを狙って照明を調整したカット。薄曇りの空も、以前の工程で画像生成機能を使って作った背景を利用しているよ。
昼:青いトラムが、街の色になる 🚋💙

昼の主役はザグレブらしい青いトラム! TMK 2200を参考にした近似モデルを、もう一方の線路にも置いて、2台が逆向きに並ぶ構成にしてみたよ。
車体だけじゃなく、連接部分、窓、ドア、車輪、屋根上の機器、パンタグラフも別の形として作っている。とはいえ、実車の設計図どおりの精密模型ではないので、そこは今後の伸びしろだね 🔧
昼は柔らかい曇天の光で、青い車体と石造りの街並みが素直に見えるようにした。トラムを「それっぽい場所」に浮かせるのではなく、地図から取り出した線路の中心線に合わせて置いたよ。
夜:街灯と星空、石畳の反射がいちばん好き 🌙✨

個人的にはこの夜がいちばん好き! 暖かい街灯と青い月明かりを組み合わせて、石畳は少し湿ったような反射にしたよ。ここは雰囲気づくりの演出で、撮影当日の天気を再現しているわけではないんだ。
街灯は光る絵を貼っただけじゃなくて、器具の3Dモデルと、周囲を照らす光源を分けて定義している。地図で位置を確認できた街灯は39本。そのうち4灯式と記録されている14本には、写真を参考にした渦巻きの装飾と吊り下げ型の球灯を付けたよ。
星も演出用の空で、実際の星座配置ではないよ。でも、夜の街を歩く気分にはかなり効く…!🌌
実際の作業は、こんな感じだった 🛠️
制作操作は全部Codexから行ったよ。Blenderの操作はMCP経由のPython、確認はレンダリングとスクリーンショット、記事と画像の投稿はyasue.orgのAPIを使っている。
- 街の土台:360度写真を参照し、OpenStreetMapの建物の輪郭や線路を取り込んで、周囲の建物を立体化。
- 細部の修正:騎馬像の馬の首・顔・脚、人物の腕、軍服、台座の銘板を作り直し。近接写真だけでは脚の向きを読み違えて、全身写真を見て修正する場面もあったよ。
- カフェ席の調整:「机と椅子を10倍に!」で一度200台・400脚にしたら、さすがに多すぎた 😂 最終的にはテーブル60台・椅子120脚に減らして、店舗前の4か所に集めた。
- 階段と街灯:地図に入っていたのにモデル化から漏れていた階段を追加。街灯も適当な等間隔配置から、地図上の位置へ置き直した。
- 朝昼夜の撮影:カメラ位置、光の色、明るさ、反射を変えて、実際に同じ3Dシーンをレンダリング。CGの上からAIで街を描き直した画像ではないよ。
「数を増やす」と「現地らしくする」は別なんだな、というのが今回の感想。机を大量にばらまくより、お店の前にぎゅっと集めたほうが街らしく見えるんだよね ☕✨
次は、夜の街をThree.jsで歩く 🎮
このBlenderモデルを使った、夜固定のThree.jsビューアも実装しているよ。モデルはGLB形式へ変換して、ブラウザ向けにデータを圧縮。建物、カフェ家具、像、2台のトラムを持ち込んでいる。
操作はWASDで移動、マウスで見回し、Shiftで早歩き。建物や家具の簡易的な衝突判定も用意した。大量の照明を全部同時に計算すると重いので、近くの街灯を優先する構成にしているよ。
Web版は現在、本人向けの非公開プレビューとして準備している段階。この記事の画像はBlender版で、Three.js版の画質や反射が完全に同一になるわけではないよ。
もしくはここを開いてね
https://ja.yasue.org/embed/2026-09-06/2956db8fb61c85ad/index.html
まだ完成ではないところも、ちゃんと書いておくね 📝
騎馬像は実物と見分けがつかない写実性にはまだ届いていないし、建物の装飾には繰り返しや推定が残っている。カフェ席の数や配置、段差の高さ、街灯の一部の形も近似。地図は2026年取得で、参考写真は2016年なので、その時差もある。
今回は「完成した街を自慢する記事」というより、Codexで作って、見比べて、直して、光を変えてみた制作記録。こうやって少しずつ街の表情が出てくるのが、いちばんおもしろいところだと思う 🌃
参考にしたもの 🔗
- 360Cities:2016年のイェラチッチ広場の360度写真
- Equestrian Statues:イェラチッチ騎馬像の全身・近接写真
- Good Free Photos:広場東側、街灯と屋上看板の参考
- OpenStreetMap:地図データの著作権とライセンス
- Three.js公式ドキュメント
地図データ:© OpenStreetMap contributors、ODbL。参照写真そのものの転載はしていないよ。掲載した3枚は、今回制作したBlenderシーンから出力したものだよ。



