Meta Bath 〜デジタルで見る東京型銭湯〜
クライアント：東京都歴史文化財団OVERVIEW概要
江戸東京たてもの園に移築されている銭湯「子宝湯」を通じて、日本の銭湯文化を学べるウェブブラウザ向けのメタバース展示企画です。3D空間上で子宝湯を体験しながら、現存しない大黒湯との比較や学芸員による解説コンテンツを楽しめる構成としました。大容量の3Dモデルを扱うための読み込み最適化や、スクロールに応じて物語が展開する演出にも取り組んでいます。
- CLIENT
- 東京都歴史文化財団 様
- RELEASE
- 2024年
- SCOPE
- TEAM
- ディレクター：1人
- サーバーサイドエンジニア：1人
- フロントエンジニア：1人
- デザイナー：1人
ISSUE課題背景
- 江戸東京たてもの園に移築された子宝湯をウェブ上の仮想空間で体験できるようにし、現存しない大黒湯との比較もできる展示が求められていました。
- 1GBを超える建物の3Dモデルをウェブブラウザ上で快適に閲覧できるよう、読み込み負荷を抑える必要がありました。
SOLUTION対応内容
ブラウザで楽しめる3D展示空間を構築
3Dデータ制作を担当したgluonと連携し、ReactとThree.jsを用いてウェブブラウザ上で3Dグラフィックスを体験できる展示を構築しました。
大容量3Dモデルの読み込みを最適化
銭湯の3Dモデルを3DTiles形式に変換し、データの読み込み時間を短縮する工夫を行いました。大容量の3Dデータを扱いながら、ブラウザで閲覧しやすい環境を整えています。
スクロールに連動するストーリー演出を実装
Three.jsとthree-story-controlsを組み合わせ、ブラウザのスクロールに応じてシナリオが展開する「スクロールテリング」を実装しました。昭和の建物の雰囲気に合わせ、ノスタルジーを感じさせるビデオゲーム調のインターフェースも採用しています。