Web Design · 3D Preview
3D 預覽網站：
簽約前，先讓客戶走進房子
3D 預覽網站，就是把平面圖做成可以在網頁上旋轉、逐層查看、用第一人稱走進去的 3D 模型。打開瀏覽器就能看，不用下載 App，手機也能操作。
01 / Live Demo
先試試看：
從外觀一路走到頂樓
按下開始後可以旋轉看外觀、點樓層看平面；切到「漫遊」就能走進去——開門、上樓梯、推開落地窗站上陽台。
示範以開源網頁 3D 引擎 Three.js 製作，依一份真實透天住宅的單元平面圖（S:1/100）逐層建模，已取得設計者同意公開；外觀為我們的示意設計，非原建築設計。想全螢幕操作，可以在新分頁開啟 3D 導覽。
02 / Benefits
平面圖看不懂的地方，
走一圈就懂了
多數買家與業主不會看平面圖。3D 導覽把「這間房間多大、從玄關走到客廳要經過哪裡」變成直接看得到的事。
01
格局一眼看懂
逐層俯瞰、每個房間標上名稱，房間大小與動線關係一目了然，不必先學會看圖例。
02
尺度感用走的
切換成第一人稱，用實際的眼睛高度走過每個空間：開門、上樓梯、推開落地窗走到陽台。天花板多高、走道多寬，比單張渲染圖更直覺。
03
放上網站就能用
一般瀏覽器直接開啟，手機有虛擬搖桿可以操作。可以放在建案頁、作品集或部落格文章裡，訪客不用離開你的網站。
下面是示範裡的四個畫面。想實際操作，捲回上方按「開始 3D 導覽」就行。
03 / Features
這個 3D 預覽網站示範，
做了哪些事
每一項都可以在上面的示範裡直接試。
外觀
外觀模式
從對街斜角看整棟建築，可以旋轉、縮放。
平面
逐層俯瞰
點選樓層，上方樓層自動隱藏，像剖開的模型一樣看進去，房間標有名稱。
漫遊
第一人稱漫遊
鍵盤與滑鼠操作，牆與家具會擋住，樓梯可以真的走上走下。
互動
門窗與電梯
對著門按 E 開關，落地窗可以推開走到陽台，電梯可以選樓層。
定位
小地圖與房名
右下角小地圖顯示所在位置，畫面上方顯示目前在哪個房間。
順暢
自動調整畫質
偵測到裝置跑不動時會自動降低解析度，保持操作順暢；也可以手動切換。
04 / Who It’s For
適合需要
「讓人看懂空間」的人
ARCHITECTS
建築師事務所
把作品集從幾張照片，變成可以逛的空間；提案時讓業主自己走一遍設計。
DEVELOPERS
建設公司
預售屋還沒蓋好，買家先在建案網站上逛一圈，來詢問的人對格局已經有概念。
INTERIOR
室內設計公司
施工前先讓屋主確認動線與家具擺放，在最便宜的階段把問題找出來。
06 / FAQ
常見問題
手上有一份平面圖？
先聊聊能做到哪裡
告訴我們是建案、作品集還是提案用，我們回覆建議的做法與需要準備的資料。