1988年に営業を終了、現在は東京建物園に移築されている銭湯「子宝湯」を通じて、日本の銭湯文化について学ぶことができる、ウェブブラウザで楽しめるメタバース展示企画です。解説コンテンツは学芸員の方が中心となって作成していただきました。ウェブサイト構築にあたって、全体で1GBを超える建物の3Dモデルを3DTilesという型式に変換することで、読込時間を短くする工夫をしました。また、演出の面では、昭和の建物とあいまって、ノスタルジーを感じさせるビデオゲーム調のインターフェースデザイン、そして、ブラウザのスクロールに応じてストーリーが展開していく、「スクロールテリング」という演出手法にチャレンジしました。
React + Three.js
Team - チーム編成
- ディレクター 1人
- サーバーサイドエンジニア 1人
- フロントエンジニア 1人
- デザイナー 1人
Problem - 課題
江戸東京たてもの園に移設された子宝湯をウェブ上でも楽しめるように仮想空間（メタバース）上で展覧会を開催したい、現存しない大黒湯と比較したいというご要望がありました。
Results - 成果
3Dデータを作成してくださったgluonさんと協力して作成しました。
ウェブブラウザで3Dグラフィックスを表示するために、Three.jsというWebGLのライブラリを採用しました。また、銭湯の3Dモデルはデータ容量がとても大きいので、3DTilesという技術を使用し、データの読込時間を短縮するような工夫をしています。また、ブラウザ画面をスクロールしながらシナリオを展開していく演出の実現には、Three.jsにthree-story-controlsというプラグインを組み合わせて使用しています。
System - システム構成
- React
- Three.js
- サーバー Cloudflare Pages