間取りを考えるのは、なぜか楽しい作業です。
屋根の形を変え、壁の色を変え、ソファをどこに置くか迷い、窓から見える景色を想像する。その時間だけを取り出して、ブラウザの中で遊べるようにしました。
家の形・外壁・屋根・床材を選び、家具を好きな場所に並べ、まわりの風景と時間帯、天気まで変えられる「理想の家シミュレーター」です。
ドラッグで家のまわりを見回し、ホイール（スマホは2本指）で近づけます。
遊び方
- 家：平屋か2階建て、屋根の形（切妻・片流れ・フラット）、外壁・屋根材・床材、間口と奥行き、ウッドデッキの有無を選べます
- 家具：押すと家の中に置かれます。置いた家具はドラッグで動かし、選んで回転・複製・削除できます。花瓶やデスクランプは、テーブルや机の上に乗ります
- 中をのぞく：屋根を外し、壁を腰の高さで切って、部屋の中を上から見下ろします。2階建てなら1F・2Fを切り替えられます
- 風景・天気：森の丘・海の見える丘・雪の高原と、晴れ・くもり・雨・雪を組み合わせられます
- 時間：朝から真夜中まで動かせます。暗くなると部屋の明かりと玄関灯が自動で灯り、夜の森にはホタルが飛びます
- ゆったり眺める：操作パネルを隠し、時間を流しながらカメラが家のまわりをゆっくり回ります。「環境音」をオンにすると、鳥の声・雨音・波の音・虫の声が鳴ります
作った家と家具の配置は、このブラウザに保存されます。次に開いたときも同じ家が建っています。「写真」で今の景色を画像として保存できます。
この家のつくり
3D表示には、ブラウザでWebGLを扱うライブラリ「three.js」を使っています。
ソファや椅子、観葉植物などの家具と、壁・床・屋根の素材は、無料の3D素材サイト「Poly Haven」のものです。実物をスキャンして作られたモデルとテクスチャで、パブリックドメイン（CC0）として公開されています。
テクスチャは、色だけでなく凹凸と表面の粗さの情報も持っています。同じ白い塗り壁でも、夕方の低い光が当たると表面のざらつきが浮き出て見えます。
家そのものは、選んだ寸法から壁・窓・屋根をその場で組み立てています。窓の位置は間口と奥行きの比率で決めているので、家を広げても窓が壁からはみ出しません。
- 空の色は、大気による光の散乱を計算するシェーダーで描いています。太陽の高さを変えるだけで、昼の青空から夕焼けまで自然につながります
- 空の色をそのまま環境光と反射に使うので、夕方は家全体がオレンジに、夜は青く沈みます
- 家のまわりの草は数万本を1本ずつ置き、風で揺らしています。木は葉の板を重ねて作っています
- 環境音は音声ファイルを使わず、ブラウザの中でノイズや音の波から合成しています
- 画面の外にあるときは描画を止めて、スクロール中の負荷を抑えています
家具と素材のファイルは、Poly Havenの配信元から直接読み込んでいます。最初の表示や、初めて置く家具には数秒かかることがあります。