Miiiwa Portfolio v1

宇宙に浮かぶ、ボクセルの惑星

Miiiwa Portfolio v1 は、このサイトの2代目です。トップページを開くと、宇宙に小さな惑星が浮かんでいて、その表面に5つのランドマーク（自己紹介、制作実績、技術スタック、経歴、お問い合わせ）と、名前のない小さなビルの群れ、観覧車のある広場が立っています。カメラは人工衛星のように惑星の周りを回り続け、スクロールするとランドマークからランドマークへ飛んでいきます。

建物も、観覧車も、歩いている住人も、すべて小さな立方体（ボクセル）を積み上げて作っています。しかも、外部の3Dモデルは1つも使わず、すべてコードで手続き的に生成しています。看板の文字でさえ、フォントをいったん画面の外に描いてから、その画素を1つずつ立方体に置き換えて立体にしています。

このページの「触ってみる」から、当時のビルドをそのまま動かせます。

平らな島から、球体の惑星へ

最初からこの形だったわけではありません。2026年7月の半ば、それまでの1ページの HTML サイト（v0）から、3D のジオラマへ作り替えることにしました。最初に作ったのは、空に浮かぶ平らな島で、カメラはその周りを一定の高さで回っていました。

7月の終わりに、この島を「宇宙に浮かぶ球体」に作り替えることにしました。建物が360度、球の全方向に立っていて、カメラはその周りを回る衛星になる。言葉にすると単純ですが、平らな地面の上では当たり前だったことが、球の上では次々に壊れました。

大円は、極のほうへ膨らむ

スクロールでランドマークを順に巡る経路は、最初、球面上の2点を最短でつなぐ「大円」で結んでいました。数学的にはこれが正しいのですが、実際に動かすと、カメラが南極のほうへ潜り込んでいきました。大円は、両端の点よりも極側へ膨らむのです。南緯40度で経度が144度離れた2点を結ぶと、途中で29.8度も極側へずれます。実際にカメラが南緯71度まで潜ったこともありました。

そこで、経路は緯度と経度の空間で滑らかにつなぎ直しました。球面の幾何として「正しい」経路より、人が見て気持ちいい経路を選んだわけです。

看板が鏡文字になった

もう1つ厄介だったのが、カメラの「上」の向きです。平らな地面なら、カメラの上は常に空の方向（世界の上）でかまいません。でも球の上では、赤道付近に立つ建物にとっての「上」は、世界から見るとほぼ真横です。カメラの上を世界の上に固定したまま建物に寄ると、建物が横倒しに映り、看板が鏡文字になりました。

今は、建物に寄っているあいだはカメラの上をその建物が立つ地面の法線に合わせています。この話は、ノートの「看板が鏡文字になった日」に詳しく書きました。

数千個の立方体を、1回で描く

惑星の上には、数千個の立方体が並んでいます。1つずつ別々に描くとあっという間に重くなるので、同じ形のものを大量にまとめて描ける仕組み（Three.js の InstancedMesh）を使い、1つのモデルは1回の描画命令で描くことを徹底しました。ビル1棟ごとに向きが違う雑居ビルの群れも、立方体1つ1つが自分の位置と向きを持つ形にして、全体を1回で描いています。

このほかにも、球の上ならではの工夫をいくつも入れました。

• 太陽を手で動かせる。 惑星のどこを照らしても、どこかは必ず夜側になります。固定の光では5つのランドマークを全部明るく照らせないことを計算で確かめたうえで、読む人が太陽をつかんで好きな場所に置けるようにしました
• 自己紹介は、映画のオープニングのように流れる文字。 画面の奥へ傾いて流れていく文字の列を、HTML と CSS だけで作っています。建物は文字より手前に描かれ、文字の上に重なります
• スマホは別の場面として組む。 PC の画面を縮めるのではなく、指で操作する前提でカメラの構図もカードの置き方も作り直しました。カードは画面の下にレールのように並び、2本指でつまむとカメラの高さが変わります

テストで守る3D

3D の画面は、壊れても気づきにくいものです。値は全部正しいのに、絵だけが壊れる。そこで、カメラの位置や向き、経路、球面の幾何のような計算は、描画から切り離した純粋な関数として書き、描画なしでテストしています。v1 の時点で、テストは480件ほどありました。

ただ、テストは「実装の式を言い換えただけ」だと意味がありません。看板が鏡文字になっていたときも、テストは全部通っていました。テストが実装の式をそのまま写していたからです。それ以来、「カメラの上の向きと視線が30度以上離れている」のように、壊れたときに何が起きるかを直接書くようにしています。

なぜ v1 は終わるのか

2026年9月、サイトの世界観そのものを作り直すことにしました。新しい方向は、宇宙に浮かぶ宇宙ステーションと、ネオンの光るサイバーパンクの雰囲気です。いろいろ試した結果、その雰囲気とボクセルの見た目は相性が悪いと判断し、ボクセルの表現からは撤退することにしました。

作り直す前に、v1 が確実に動くうちにそのまま保存しておくことにしました。何か月も経ってから古いコードを掘り起こすと、依存しているパッケージが新しい環境で素直に入らなくなっていることがあるからです。保存したのは、スクリーンショットではなく、当時のビルドそのものです。

保存の仕方

過去のビルドは、このサイトの /archive/v1 にそのまま置いています。ただ、ビルドをコピーするだけでは動きませんでした。

• 読み込むファイルの場所がずれる。 書き出された HTML は、JavaScript や CSS を「サイトの一番上から数えた場所」で指しています。そのまま別のフォルダに置くと、今のサイトのファイルを読みに行って壊れます。ビルドのときに「このサイトは /archive/v1 の下に置かれる」と教えてからビルドし直しました
• 画像だけは、それでも直らない。 画像の指定はこの設定の対象外で、保存したあと2日間、v1 の制作実績の画像が今のサイトの同名の画像を黙って借りていました。書き出したあとの文字列を置き換えて直し、同じことが起きないようにテストを足しました
• 検索には載せない。 古いプロフィールを載せた「Miiiwa | Portfolio」が、今のサイトと並んで検索に出ないようにしています

スクロールでランドマークを巡るもよし、ドラッグで好きな方向へ飛ぶもよし。ぜひ惑星を1周してみてください。