おへや3D

写真から部屋を3Dにして、カーテン・照明・床・壁紙を置きかえ、中を歩き回れるアプリ。 スマホのブラウザだけで動きます(インストール不要・ホーム画面に追加できる)。

公開先: https://roguepink.github.io/3d/

できること

• 👣 部屋の中を歩き回る(左側で歩く・右側で見回す、PCは WASD とマウス、スマホの傾きでも)
• 👆 何でもダブルタップで選んで直せる(置いたもの・壁・床・天井・巾木・廻り縁・枠・窓・ドア・柱型)。矢印で動かす幅は 5/10/50/100mm。↶↷ は操作1回ぶんずつ
• ＋ カーテン・レース・ロールスクリーン・ブラインド(横型/縦型)・シーリングライト・ペンダント・シャンデリア・ブラケット・ダウンライト・フロアランプ・ラグ・カウンター・机・テーブル・ソファ・ベッド・棚・テレビ・絵・鏡・時計・観葉植物 を置く
• 🧱 床(フローリング・タイル・クッションフロア・畳・カーペット…)・壁紙・天井を貼りかえる。見本帳の写真も貼れる。廻り縁・巾木(あり/なし・高さmm・色/木目)、窓の枠(あり/なし=クロス巻き込み)、ドア枠の仕上げ
• 🔌 設備は別画面:コンセント・スイッチ・インターホン・火災警報器・エアコン・給気口・換気扇・洗面台・トイレ・システムキッチン・浴槽(一般的な高さに自動で付く)
• 🎤 言葉で指示(「ここにカーテンをつけて」「床をフローリングに」「壁を白に」「夜にして」「窓をつけて」…)
• 📷 部屋の写真の壁の四隅を合わせて、本物の壁として貼る。動画から場面を切り出す。360°パノラマ
• 📐 間取り:部屋を足して、ドアでつないで、家全体を歩く。部屋の形は自由(L字・斜めの壁・角を足す/動かす/斜めに落とす)、柱型・袖壁(腰壁)・梁(下がり天井)も置ける
• 📏 寸法は mm。尺モジュール(910)とメーターモジュール(1,000)を切りかえ。間取りでは角・柱型・袖壁・梁・窓がグリッドや壁の面、90°に吸いつく(それ以上動かせば外れる)。選んだものの寸法はその場で書きかえ可能。↶ もどす / ↷ 進む
• 📋 置いたものの寸法一覧(見積りの下書きに)。🔄 ぐるっと一周見回す(紹介動画用)
• ☀️🌇🌙 昼・夕方・夜の切りかえ。👀 立った高さ/座った高さ。↶ もどす。📸 画像にして LINE などで送る
• 🤖 (任意)Gemini の鍵を入れると、自由な言い方の指示と、写真から部屋の広さの読み取りができる

しくみ

• index.html / style.css / js/*.js(ビルドなし、three.js は CDN から)
• 素材の画像は使わず、js/textures.js がその場で描く
• 保存はこの端末の中(IndexedDB)。写真はどこにも送らない(AIを使うときだけ Google へ)
• _check/ は動作確認用(Git に入れない)

確かめ方(開発用)

cd ~/claude-work/3d && python3 -m http.server 8765

を動かして http://127.0.0.1:8765/#demo を開く(見本の家がすぐ開く)。