1 つのキューブに、写真が 6 枚。
写真を 6 面に貼ったキューブを、暗い空間に並べていく日記アプリです。
画像はブラウザ内で小さくしてから Supabase に保存し、React Three Fiber で描いています。
- 6面
- 1 つのキューブ
- 3種
- 並べ方
- 0.15MB
- 保存する画像の上限
記録するまで
- 写真を選ぶ
- キューブの展開図に、面ごとに写真を割り当てます。
- 小さくする
- ブラウザの中で、長辺 1280px・0.15MB 以下の JPEG に圧縮します。
- 保存する
- 画像をストレージに上げ、その一覧を日記の記録に保存します。
- 並べる
- これまでのキューブを、暗い空間に 3D で並べます。
作りの要点
- 空いた面も埋める
- 写真が 6 枚に満たないときは、写真の繰り返しか単色で残りの面を埋めます。
- 数が増えても見渡せる配置
- 並べ方は球面・螺旋・結び目の 3 種類です。球面は黄金角で配置します。キューブが増えても、広がりは対数で抑えます。
- ログインせずに見られる
- 匿名のログインで見本の日記を閲覧できます。自分の日記は自分だけが読み書きできるように、行ごとのアクセス制御を掛けています。
- フレームワーク
- Next.js 16 React 19 Tailwind CSS 4
- 3D
- three.js React Three Fiber drei
- データ
- Supabase（Auth・Database・Storage）
- 画像
- browser-image-compression