しかけ絵本(ポップアップブック)を、紙ではなくブラウザの上で作りました。 見開きの中央からページが立ち上がり、めくるたびに別の世界があらわれます。 絵は 2 通りの見え方を切り替えられます。「水彩」はやわらかい絵本の絵、 「3D」は同じ世界をポリゴンで組んだ立体です。同じ場所を二つの目で見る、という作りです。
それぞれの世界は、このサイトにある別の作品の入口にもなっています。 絵本を読み進めると、サウンドノベルにも、パズルにも、音楽の地図にもたどり着きます。 この本 1 冊が、このサイト全体の目次になっている、という設計です。
それぞれの世界から、そのまま作品に入れます。絵本を先に読んでも、ここから直接行っても構いません。
Enchanted(妖精の森)、Valhalla(北欧の神々の広間)、Dark Fantasy(崩れゆく大聖堂)は、 どこにもつながっていない、ながめるだけのジオラマです。ページをめくって、ただそこに居るためのページです。
10 匹のいきものが、どこかのページに隠れています。オオカミのこども、イボイノシシ、 ジェンツーペンギン、ビントロング、ユキヒョウ、ケナガイタチ、ライオンのこども、 ジムグリガエル、オサガメ、ディンゴ。 どのページに隠れるかは日替わりで変わるので、日を置いてめくると別の子に会えます。 見つけた子は図鑑に記録され、同じブラウザなら次に開いたときも残っています。
パソコンでもスマートフォンでも読めます。WebGL が動くブラウザ(Chrome・Safari・Edge・Firefox の 最近の版)が必要です。3D の描画がつらい端末では「水彩」に切り替えると軽くなります。 通信環境が細いときは、世界を開くたびに少し読み込みの時間がかかります。
3D の描画は Three.js、それぞれの世界のジオラマは Blender で組んで glTF で書き出しています。 ページがめくれる動きは CSS の 3D 変形で、紙の厚みと影は手で調整しました。 サーバー側の処理はなく、HTML とアセットだけで動きます。
制作の工程と、つまずいた所は記事にしています。うまくいった手順よりも、 詰まった所とそこの抜け方を中心に書いています。