Floorplan 3D：単一ファイルで使える住宅設計ツール
ブラウザー上で使える間取り設計ツールをご紹介。正確な2D家具配置と、Three.jsによるインタラクティブなウォークスルーを、1つのHTMLファイルで実現します。
2Dで部屋のレイアウトを考えるのは手早くできますが、実際にその空間に立ったときにしっくりくるかどうかは、なかなか判断しにくいものです。floorplan-3dは、ブラウザー上で使える住宅設計ツールで、その隔たりを埋めます。2Dで間取りを配置し、壁を変更し、寸法を測定したあと、Three.jsによるインタラクティブなシーンに切り替えて、上から確認したり、室内を歩き回ったりできます。
このプロジェクトは、驚くほど簡単に試せます。アプリケーションは単一のindex.htmlで構成され、フレームワークやビルド工程を使わず、標準的なHTML、CSS、JavaScriptで作られています。リポジトリをクローンして、ブラウザーでファイルを開くだけで利用でき、パッケージのインストールは不要です。唯一の例外は3Dエンジンで、Three.js r160をjsDelivrから読み込むため、最初に3Dビューを表示する際にはインターネット接続が必要です。
寸法入りの間取りから、歩き回れる部屋へ
2Dエディターは、単なるスケッチではなく、実用的なレイアウト作業を想定して設計されています。間取りは1:60または1:100の縮尺で表示され、寸法にはミリメートルを使用します。60種類以上の家具・家電アイテムを収録したライブラリには、寝室、リビング、キッチン・ダイニング、浴室、家電、書斎・レジャー空間向けのアイテムがそろっています。間取りにアイテムをドラッグして配置し、移動やサイズ変更、回転ができます。Shiftキーを押しながら操作すると、角度を自由に指定して回転できます。家具を壁に自動でスナップさせることもできます。
寸法ツールを使えば、間取り上で通路幅や壁の長さを直接確認できます。壁の近くでは壁にスナップし、Shiftキーを押すと測定方向を水平または垂直に固定できます。リフォーム計画では、非耐力壁に撤去予定の印を付け、耐力壁とは別に識別できます。必要に応じて寸法、部屋名、家具、グリッド、耐力壁の表示・非表示を切り替えられます。
この区別は重要です。エディターは変更案の視覚化に役立ちますが、作図ツールは構造評価の代わりにはなりません。壁の撤去を示す印は設計上の注記として扱い、構造に関わる変更を行う前に、資格を持つ専門家に相談してください。
インタラクティブな3Dで設計を確認
Tキーを押すと、2D間取りと3Dシーンを切り替えられます。3Dビューでは、鳥瞰、斜め、真上からの視点を利用できます。また、リストから部屋を選ぶと、カメラをその部屋まで移動できます。さらに没入感のある確認には、デスクトップではWASDキーとマウスを使うウォークモード、タッチ端末では仮想ジョイスティックを利用できます。探索中にドアを開閉することもできます。
シーンは、単純なブロックモデル以上のものです。キャビネット扉の継ぎ目や取っ手、布張りのベッドヘッドボード、反射する金属やセラミックの素材など、細部まで作り込まれた家具モデルが含まれています。3Dでも家具を選択して移動でき、変更は2Dのレイアウトにも反映されます。壁の表示は全高表示とカットアウェイ表示を切り替えられ、日照時間スライダーや夜間照明を使えば、さまざまな条件で空間がどのように見えるかを確認できます。
素材を比較し、変更を管理
アプリケーションは、部屋ごとの面積と、室内の有効面積の合計を自動で計算します。各部屋には、木製フローリング、タイル、大理石、テラゾ、カーペットなどの床仕上げを設定できます。素材の見積もりには部屋の面積に加えて**廃材分として5%**が加算され、概算予算を立てる際の目安になります。
編集内容は取り消し・やり直しに対応し、間取りはブラウザーのlocalStorageに自動保存されます。共有用にPNG画像を書き出したり、間取り全体をJSON形式でエクスポート・インポートしたりできます。インターフェースは中国語と英語に対応しており、右上の切り替えボタンから言語を変更できます。選択した言語は記憶されます。
localStorageのデータはブラウザー内に保存されるため、持ち運び可能なバックアップの代わりにはなりません。別のブラウザーに設計を移したり、現在のブラウザープロファイルの外にコピーを保存したりする場合は、JSONを書き出してください。
始め方
リポジトリをクローンし、index.htmlを直接開くか、簡単な静的サーバーを起動します。
git clone <repository-url>
cd <repository-directory>
python3 -m http.server 8000
ブラウザーでhttp://localhost:8000を開きます。サーバーは必須ではありませんが、ブラウザーによるローカルファイルの扱いを安定させられる場合があります。2Dエディターはビルド工程なしで動作しますが、最初に3Dビューを表示する際は、jsDelivrからThree.jsを取得するためネットワーク接続が必要です。
便利なキーボードショートカット
| キー | 操作 |
|---|---|
T |
2Dと3Dを切り替え |
V / M / X |
選択、測定、壁に変更予定の印を付ける |
R / Shift+R |
選択した家具を時計回り／反時計回りに90°回転 |
Delete / Backspace |
選択した家具を削除 |
Ctrl/⌘ + D |
選択した家具を複製 |
Ctrl/⌘ + Z / Ctrl/⌘ + Shift + Z |
元に戻す／やり直す |
F |
ウィンドウに合わせて間取りを表示 |
+ / - |
拡大／縮小 |
[ / ] |
サイドパネルを折りたたむ／展開する |
Shift + F |
全画面表示を切り替え |
Esc |
現在の操作をキャンセル |
ウォークモードでは、WASDキーまたは矢印キーで移動し、Shiftキーで速く歩き、Eキーでドアを操作します。
別の間取りに合わせてカスタマイズ
このプロジェクトでは設計データをindex.html内にまとめているため、デモをカスタマイズしたい開発者にも扱いやすくなっています。主なデータ構造は、部屋のポリゴン、名称、既定の床材を定義するROOMS、壁と窓の開口部を定義するWALLSとWINS、素材名と価格を定義するMATS、家具の種類、ラベル、既定寸法、色を定義するLIBです。対応する3DモデルはbuildFurniture()関数で定義されています。
独自の住宅に合わせるには、必要な形状や素材に合うようにこれらの定義を更新し、必要に応じて家具の項目やモデル生成のロジックを調整します。間取りデータと描画コードを一か所にまとめる方法は、小規模で自己完結したツールには便利ですが、より大規模なアプリケーションでは、データ、描画、インターフェースのロジックをモジュールに分割するのが適切でしょう。
MITライセンスで公開されているfloorplan-3dは、実用的なプランニングツールであると同時に、SVGベースの2D編集とThree.jsによる室内ビューを組み合わせた、ビルド工程不要のWebアプリケーションのコンパクトな実例でもあります。リポジトリの報告によると、スター数は3.7k、フォーク数は778で、言語別の内訳では実装のすべてがHTMLとなっています。開発者にとっての魅力は明快です。クローンしてすぐにレイアウトを試し、単一ファイルで驚くほど充実した設計ワークフローを実現する方法を確かめられます。