歩ける大阪城

何を作ったか

大阪城の写真を数枚だけ手がかりに、天守とその周囲をブラウザの中へ建てたものです。実測図面は使っておらず、寸法も配置も写真から目分量で決めています。歴史的な復元ではなく、写真から受けた印象を3Dに起こしたもの、と思って歩いてみてください。

何が建っているか

• 5層の天守。緑青の屋根、白い漆喰の壁、千鳥破風と唐破風、最上層の黒地と金、大棟の鯱
• 天守台と、本丸をぐるりと囲む石垣。石は1つずつ積んであり、上へ行くほど立つ勾配を付けた
• 石垣の外の内堀と、その先の対岸
• 隅櫓が3つと、正面の櫓門
• 石垣の縁に沿った松並木、参道の石灯籠、低木と庭石
• 遠景の高層ビル群。城と現代のビルが同じ画面に入る、あの見え方を狙っている

どう作っているか

天守と松・櫓・門・石灯籠はBlenderで作ってGLBに書き出し、石垣・堀・広場・ビル群はThree.js側で組み立てています。BlenderのモデルはClaude Codeが書いたPython scriptから毎回同じ形に作り直せます。texture画像は1枚も使わず、色は材質と頂点色だけで付けました。

使用技術

• Three.js
• WebGL
• Blender
• Claude Code
• Astro
• TypeScript

やってみて分かったこと

屋根の反りと破風の位置を少し変えるだけで、日本の城に見えるかどうかが決まりました。逆に石垣は、石を1つずつ積む形にした時点で一気にそれらしくなり、色や光の調整はほとんど要りませんでした。写真を見ながら形を直す作業は、モデルを精密にする作業というより、どこが特徴なのかを見つける作業に近かったです。

同じ一人称の仕組みは作り直した変な小島から持ってきています。島も城も、歩く操作と地面の高さの扱いは同じものです。