這是依照實際尺寸平面圖(1/40)建立的 3D 户型,可以在瀏覽器裡自由擺放家具。
- 看感覺:切到上方的 「人視角」,用站著的高度看每個房間,判斷家具買多大。
- 看整體:滑鼠左鍵拖曳旋轉、右鍵拖曳平移、滾輪縮放。手機用單指旋轉、雙指縮放與平移。
- 移動家具:直接按住家具拖曳到想要的位置。
- 新增家具:從左側「家具庫」點一下或拖進畫面(手機點左上角 ☰ 打開)。
- 調整:點選家具後,右側會出現面板,可改尺寸、顏色、旋轉。手機會在下方出現 移動列:用 ◀ ▲ ▼ ▶ 移動(按住可連續移動)、⟲ ⟳ 轉 90°,按「尺寸・顏色」才展開完整面板。
所有修改都會自動存在這個瀏覽器,不用按儲存。
新增
左側家具庫可依分類或搜尋找家具,點一下會放在畫面中央,或直接拖曳到想放的位置。
沙發與單人椅
「沙發」 分類:圓扶手三人沙發、弧形沙發、YKS 伊達三人座(灰/米白,207×93×106)、hoi! 好好生活 13 款 2.1M 以上三人沙發(Linsy、YW、hoi! 泡泡/暖暖,含實木框架、可調頭枕、頭層牛皮款)、IKEA 布沙發(KIVIK、VIMLE、LILLESÄTER、MANNARP)與皮沙發(LANDSKRONA、STOCKHOLM、KLIPPAN、HEMLINGBY、VIMLE、KIVIK)。「單人椅」 分類:STOCKHOLM 2025 圓扶手椅、STRANDMON 高背椅、POÄNG 彎木椅、DYVLINGE 拉扣旋轉椅(無扶手、五爪腳,63×75×68)、LILLESÄTER 旋轉椅。寬深高依官網標示。
換款式
點選任何家具,屬性面板的 「款式」 下拉可換成同分類的別款,位置與方向不變,尺寸自動改成新款。
書桌與層架
「書桌」 分類有 IKEA TROTTEN、MITTZON、GLADHÖJDEN、IDÅSEN 升降桌,改「高」就是調桌面高度(站立約 105–115cm),適合放在沙發背後。「書櫃・層架」 分類有 BILLY、KALLAX、梯形書架,以及 MUJI SUS 層架(小 83/中 120/大 175.5cm,寬 58 或 86cm),層數會依高度自動調整。
燈飾
「燈具」 分類有吊燈、軌道燈、立燈(ÖKENSAND、RANARP、LAUTERS、弧形)、桌燈(DEJSA、BLÅSVERK、TÄRNABY、ÅRSTID、BLIDVÄDER)、壁燈(NYMÅNE、VARMBLIXT、SOLKLINT)。桌燈放到桌上請把「離地」設成桌面高度;壁燈預設已掛在牆面高度。
尺寸參考
畫面中的 人形(書房・其他分類)身高 170cm,可以拖到家具旁邊比對高度;改「高」就能換成家人的身高。
衣櫃
主臥預設是 IKEA BOAXEL 壁掛衣櫃,寬 240cm(4 格各 60cm:長版吊掛、上下兩層吊掛、層板+網籃、長版吊掛),深 40cm、高 201cm。臥室分類的「款式」可換成開放式衣櫃或有門衣櫃。
地毯與牆面裝飾
「地毯」 分類有素面、邊框、條紋、摩洛哥菱格、長毛、黃麻圓毯、色塊圖樣與走道長毯,主色是底色、配色是花紋色。「牆面裝飾」 分類有多種掛畫(抽象、拱形、線條、山景、包浩斯、植物、三聯幅)、圓鏡、拱形落地鏡、壁掛層板與掛鐘:主色改變畫作色調、配色是畫框顏色,「離地」是畫框底部高度。拖到牆邊會自動貼牆。
點選掛畫後按 「換成我的照片…」 可以放自己的照片或畫作(只存在這個瀏覽器與匯出檔,分享連結不會包含照片)。
窗簾
「窗簾」 分類有一紗一布、一紗一布(麂皮紋)、全遮光、全遮光+長虹玻璃貼、調光簾(斑馬簾),以及單獨的長虹玻璃貼。預設客廳靠電視的落地窗是一紗一布(米色麂皮紋)、沙發後方書房窗是遮光簾(米色帶灰)、主臥是全遮光;點選窗簾後用 「款式」 就能換成其他種,寬度會保留。「開合」 滑桿調整拉開程度(調光簾為捲起程度)。主色=布簾/簾片顏色,配色=白紗或遮光內襯顏色。
牆面油漆(特殊漆)
畫面左上的 「🖌 牆面油漆」 開啟後,選顏色與漆種(平光乳膠漆、礦物石灰漆、微水泥、清水模漆、珠光藝術漆),再點牆面就會刷上;同一平面相連的牆段會一起刷。「橡皮擦」可還原單面牆、「全部還原」恢復白牆。牆色會跟著方案、分享連結與匯出檔一起儲存。
冰箱、櫃子等家具的顏色則是點選家具後,在屬性面板用色盤或色票調整。
天花板軌道燈
客廳、餐廚和主臥的天花板預設有 軌道燈(燈具分類),可以拖曳移動、旋轉,改「寬」就是軌道長度,燈頭數量會自動增減。
懸空與吊掛家具
懸空電視櫃(客廳分類)預設離地 25cm,灰色抽屜面板、中間是開放木格;吊燈(燈具分類)掛在天花板,電線會隨高度自動調整。兩者都用屬性面板的「離地」調高低,「顏色」改面板、「配色」改木作外框。
移動與對齊
按住拖曳即可移動,會自動吸附 5cm 格線並貼齊牆面。想自由擺放時,取消上方的「吸附」。用方向鍵可微調 5cm(加 Shift 為 1cm)。
手機:家具很小時,點在家具旁邊也會選到最近的那一件。選取後用下方移動列的箭頭移動,▲ 永遠是畫面上方的方向;「每步 5cm」可切換 1/5/10/30cm。建議切到「平面」視角移動最準。
屬性面板
- 名稱:點標題可改名,例如「媽媽的書桌」。
- 寬/深/高:輸入實際尺寸(cm)。
- 離地:家具底部離地板的高度,例如懸空電視櫃、牆上的電視、吊燈。
- 旋轉:拖曳滑桿,或按 ⟲ ⟳ 轉 90°。
- 顏色/配色:主色(布面、燈罩、桌面)與配色(腳、框架、底座)。可用色盤自由選色,或點下方 色票(米白、灰、橡木、胡桃木…)一鍵套用;「預設」可還原。
- 複製/刪除:在面板下方。
選取時地上的橘色箭頭代表家具「正面」朝向。
四種視角(上方切換)
- 3D:鳥瞰立體,適合看整體感覺。
- 平面:正上方俯視,最適合精準排位置。
- 人視角:以站著的視線高度看房間,擋在前面的牆會自動降成矮牆、前方別間的家具會暫時隱藏,最適合確認家具大小與比例。左鍵左右環視、滾輪前進後退、右鍵平移;點左側「空間」可切到各房間的最佳角度。
- 漫遊:以 155cm 的視線高度在屋內走動。電腦點畫面後用 WASD 移動、滑鼠轉向(Shift 加速、Esc 釋放滑鼠);手機拖曳畫面轉向、用右下方向鍵移動。
畫面選項(左上角)
- 全高牆/半牆/低牆:牆擋住視線時切到半牆或低牆。
- 標示:顯示房間名稱與面積。
- 天花板:人視角與漫遊時顯示天花板與軌道燈的樣子;從上方的 3D/平面看不到天花板。
- 透視牆:3D 時自動降低靠近鏡頭的外牆,人視角時連隔間牆一起降低;取消勾選可看完整牆面。
- 原始平面圖:把尺寸圖疊在地板上對照。
左側「空間」清單點房間名稱可直接飛過去;右上 ⛶ 重設視角。
自動儲存
每次修改都會自動存在目前這台裝置的這個瀏覽器,關掉再開還在。
存成方案(右上「方案」)
- 輸入名稱後按 「存成新方案」,例如「現況」「方案 A」。
- 載入:切換到該方案的擺設(可用復原找回切換前的樣子)。
- 更新:用目前的擺設覆蓋該方案。
- 按鈕上會顯示目前的方案名稱;顯示「已修改」表示有改動還沒存進方案。
- 快捷鍵 Ctrl+S:直接更新目前的方案。
要注意
- 換手機、換電腦或換瀏覽器看不到,要用「分享」連結帶過去。
- 存檔依網址分開:請固定用 muji-floorplan.netlify.app 開啟。以前在舊網址(leonsheep0612.github.io)存的擺設,在舊網址按「分享」,再把連結裡
#L= 之後的內容接在新網址後面打開,就能搬過來;方案清單則用「匯出/匯入配置 JSON」搬。
- 清除瀏覽器資料、或用無痕模式,擺設會消失。
- 牆高、標示等畫面設定不會記住。
備份與還原(右上 ⋯ 選單)
- 匯出配置 JSON:下載成檔案備份(包含所有方案)。
- 匯入配置 JSON:從檔案還原,檔案裡的方案會加進方案清單。
- 下載截圖 PNG:存目前畫面。
- 還原預設配置:回到一開始的擺設。
改錯了?按上方 ↶ 復原(Ctrl+Z)。
網址
網站網址是 https://muji-floorplan.netlify.app,不用註冊或登入,打開就能用,對方改的內容會存在他自己的瀏覽器。
傳給別人看或一起改
- 擺好後按右上角 「分享」,複製連結。
- 用 LINE、Email 傳給對方,對方打開就會看到一模一樣的擺設。
- 對方可以直接修改,改完也按「分享」把新連結傳回來。
- 你打開新連結,就能接著對方的版本繼續改。
注意事項
- 每個連結都是當下的快照,之後再改要重新分享。
- 沒有自動合併,建議講好「現在輪到誰改」,不要兩人同時各改各的。
- 打開分享連結並修改後,會取代你瀏覽器裡原本的擺設;想保留請先「匯出配置 JSON」備份。
- 連結被截斷打不開時,改用「匯出配置 JSON」傳檔案,對方用「匯入」開啟。
- 掛畫換成自己的照片時,分享連結不含照片,要用「匯出配置 JSON」傳檔案。
- 對方公司網路打不開時,可請對方改用手機行動網路開啟,或先傳「下載截圖 PNG」。
| R / Shift+R | 順 / 逆時針旋轉 90° |
| Q / E | 旋轉 15° |
| 方向鍵 | 微調 5cm(加 Shift 為 1cm) |
| Delete | 刪除選取家具 |
| Ctrl+D | 複製 |
| Ctrl+S | 更新目前的方案 |
| Ctrl+Z | 復原 |
| Ctrl+Shift+Z | 重做 |
| Esc | 取消選取 |
| T | 切換 3D / 平面 |
| F | 重設視角 |
| WASD | 漫遊移動(Shift 加速) |
尺寸依 1/40 平面圖換算,僅供參考,實際以現場丈量為準。