建案 3D 看屋網站的做法：模型分包、剖切選層與室內 360 全景

這個建案看屋網站與 Mxm 共同開發，買家的操作路徑依序是整棟、選層、選戶，最後進入室內 360 全景。資料涵蓋兩棟塔樓、超過 1,000 戶、10 種戶型與70 多張全景，桌機與手機使用同一套操作。與 Mxm 共同開發的看屋網站以 three.js 與 Vite 建置。

建築模型、室內渲染與 360 全景由 Mxm 製作，網頁端的模型分包與壓縮、互動流程、周邊地標與日夜景由磨人開發。載入與記憶體的通用方法見 Web 3D 效能工程，整體建置範圍見3D 互動網站的建置範圍。

渲染母檔進入網頁的流程

渲染母檔約 1.4 GB、近 5,000 萬面。網頁使用的外觀模型是減面後的版本，共約 206 萬面，以 Blender 的批次腳本分成 4 個模型包。主建築與周邊分屬不同的交付檔，分包直接依來源檔劃分。

模型格式採用 glTF 2.0，Khronos 3D Formats Working Group，2021的規格將 glTF 定位為開放、可互通的傳輸格式。幾何以 Draco 壓縮，Zhang 等，2013–2017定義了在 glTF 中使用 Draco 的方式。解壓在 Web Worker 內進行，桌機同時 4 個 worker，手機的主建築 2 個、周邊 1 個，每批解完即釋放。

貼圖是下載量與 GPU 記憶體的主要來源，分成 512、1024、2048 與原圖 4 檔。分檔時直接改寫 GLB 容器內的貼圖，幾何資料原封不動，不經過重新編碼。glTF 另有 KTX v2 搭配 Basis Universal 的貼圖擴充（Callow 等，2020），由引擎轉碼成 GPU 支援的區塊壓縮格式；這個專案的貼圖則以 WebP 內嵌在 GLB 裡。短邊小於 600 px 的觸控裝置載 512 檔，平板與較小的螢幕載 1024 檔，桌機依記憶體與螢幕像素在 1024、2048 與原圖之間選擇。

桌機選到 2048 或原圖檔時，首次載入先走 1024 檔。開場結束、畫面閒置後，程式把較大的圖一張一張換上去，每張在背景下載並解碼，沒有人操作時才上傳 GPU，換上去的圖與直接載入該檔的 GLB 逐像素相同。在模擬 40 Mbps、延遲 40 毫秒、關閉快取的條件下，約 4.9 秒看得到建築，約 8.2 秒可以操作。跨模型包內容完全相同的 4 組貼圖共用同一份 GPU 貼圖。

互動會切換到的 shader 變體，在載入畫面還蓋著時先編好；周邊與新到的模型包，等 shader 以 KHR_parallel_shader_compile 平行編完、貼圖逐幀上傳完才加入場景。這些做法對照 MDN Web Docs，2026的 WebGL 建議把減少 draw call、管理貼圖記憶體與先全部編譯再連結 shader 並列為三個處理重點，貼圖分檔與預先編譯屬於後兩項。

選層與選戶：剖切面加半透明外殼

選層時，一組剖切面把該層樓板以上的模型切掉。剖切面共 3 個，分別是上緣、下緣與單棟剖切，載入時一次掛到每個需要被切的材質上；之後開關與換層只改平面的位置值，不需要重編 shader。進入樓層時，下緣剖切面從地面往上掃到該層樓板，建築由下往上換成半透明。

半透明的部分另做一層外殼，與主建築共用同一份幾何，使用不打光的獨立 shader，只畫剖切面以下，邊緣依視角提亮，不寫入深度，雙面繪製，前後立面因此疊出層次。主建築的原材質有上百種，逐一改成半透明會讓每次切換都重編 shader；獨立外殼不動原材質。

該層以實際樓板高度平鋪一張 CAD 平面，由地板、戶別色塊與線稿組成。戶內線稿來自室內設計圖，走廊、核心與梯廳來自送審圖的牆線，座標轉換在建置時完成並驗證過。樓板、色塊與線稿使用同一組材質參數，共用同一支 program，進入樓層不增加編譯。戶別色塊的輪廓取自送審圖中每一戶的戶型區塊；選一戶時，其餘戶變灰、標籤隱藏，面板只留該戶資訊。返回鈕一律回到上一層，買家在任何一階都能退一步。

室內 360：全景資料依戶型組織

戶內與公設的全景由 Mxm 渲染成 4096 x 2048 的長方圖，另附一張 512 x 256 的低解析底圖。全景依戶型渲染，同一戶型的每一戶共用同一組機位，所以全景的張數取決於戶型與公設的數量，與戶數無關，合計70 多張。格局左右鏡射的戶沿用同一組全景，在程式內水平翻轉。

進入全景時先載低解析底圖，高解析版以分塊方式上傳 GPU，完成後用 350 毫秒淡入覆蓋。全景以 ImageBitmap 解碼，上傳後釋放 CPU 端的副本。全景貼在向內翻面的球體上，預設垂直視角 110 度，可在 32 到 125 度之間調整，拖曳後的慣性以不受幀率影響的方式衰減。

走到下一個房間的跳點，在建置時由資料算好。Mxm 交付各機位的相機位置檔，建置腳本逐一戶型把相機座標對位到室內平面圖：以全景中門框與窗框的位置為依據做最小平方擬合，每個戶型各有一組朝向修正，因為全景的起算方向在不同場景之間相差 90 度的倍數。每個機位記錄鄰近機位的方位角、平面距離，以及兩點之間有沒有牆，門視為打開。看得到的機位，跳點直接標在該機位上；被牆隔開的機位，跳點標在出口門的正中，目的地是那扇門後走路最近的機位。

3D 進入 360 時，相機先朝那一戶推近，最後一幀存成快照放大並淡出，全景視角同時由窄放寬到預設，約 1.3 秒。點跳點時，視線先轉向 0.35 秒，再用 0.65 秒移動到下一個機位；系統設定為減少動態時，只保留交叉淡入。

左下角的平面小圖，是每個戶型各一張向量 SVG，由室內設計圖的 10 個戶型區塊輸出。SVG 依 CAD 圖層分成牆、門窗、家具三級，並內建 media query：顯示尺寸在 130 px 以下只留牆與門窗，340 px 以下家具退成底紋，展開後才顯示全部。目前機位的圓點下方有金色扇形，標示視角方向。

周邊與日夜景：按需載入

周邊約 25 MB，預設不載入，按下 Surroundings 才開始下載。模型到達後先不放進場景：共用貼圖、裝上天空霧、離場編 shader、逐幀上傳貼圖，全部完成才加入，所以展開的第一幀沒有停頓。

展開動畫約 6.4 秒，分兩拍：相機先升到屋頂上方，近處街區由基地中心長到約 650 公尺；接著相機滑向正面取景，半徑以對數內插掃到 14.5 公里，涵蓋相機看得到的最遠處。前緣是一條發光的線稿帶，由世界座標的格線組成，樓層線每 3.2 公尺一條，垂直線每 8 公尺一條。所有周邊材質共用同一組 uniform，動畫只改數值，不重編 shader。收回只需 0.9 秒。

地標標籤用 DOM 呈現，排版時先全部投影、再一次計算避讓，最後只寫入有變動的位置，一幀內不會逼瀏覽器重排。標籤是否被建築擋住，以 8 公尺一格的高度格網判斷，每 150 毫秒判一次；一條穿過主建築的射線就要約 80 毫秒，格網避開了這筆成本。

日夜切換同時改變光、霧、背景與曝光，全部由共用的 uniform 控制，切換時只改數值，不重編 shader；夜景資料在第一次切到夜間時才下載。主建築的玻璃依哪一戶、第幾層決定亮不亮：整戶同時亮，戶內再分房間，戶框在瀏覽器裡柵格化成一張 256 x 256 的查表。周邊街區的窗光不下載貼圖，由 shader 依世界座標與牆面方向產生窗格，亮燈比例取自約 45 公尺尺度的低頻雜訊，離相機越遠亮燈越稀。

手機的流程與資源設定

以觸控為主的裝置，包含接上鍵盤的 iPad，在開頁時就套用另一組設定：陰影與環境反射的尺寸會進入 shader 的 program key，中途切換會造成全場重編。流程仍是選層、選戶、進入 360、展開周邊、切換日夜，入口的形式有差異：公設全景由底部清單進入，下一個房間以底部按鈕走到，平面小圖點開成全寬，周邊地標的清單收在底部抽屜。

手機檔的幾何另外處理：超過 65,536 個頂點的 Draco 圖元，在建置時切成小塊，沿用原本的量化參數重新編碼，解出的浮點數與原檔逐位元相同。載入時索引、位置與法線都改用 16 位元整數，法線最大角誤差 0.002 度，幾何的 GPU 記憶體約減少三分之一。

繪製節奏桌機與手機共用：畫面靜止時完全不繪製；拖曳時每幀只畫到畫布左下角 0.625 倍大小的區塊再拉伸，停手後以 8 個次像素抖動的樣本累加出全解析度的畫面。連續 20 幀超過畫面更新間隔 1.25 倍時，像素密度每次降 0.25，最低 1.0；手機降到最低仍掉幀時封頂 30 fps。哪些功能留在手機、哪些只給桌機，由量測結果決定，方法見手機 3D 的記憶體預算。

兩端的銜接

Mxm 與磨人之間靠約定銜接：分包名稱與構件命名由雙方先講定，網頁以名稱辨識塔樓、裙樓、周邊建築與道路，並決定哪些構件參與剖切；任一邊調整命名，另一邊同步修改。外部製作的模型如何進件與驗收，見外包 3D 模型的進件與驗收；減面與壓縮前後的實測做法，見3D 模型優化前後對照表。

同樣的路徑適用哪些專案

住宅與商辦建案，以及需要由整體逐步走進空間的專案，可以沿用同樣的路徑。判斷時看兩件事：空間是否有整體、分區、單元、室內這樣的層級，以及買家是否要看到室內才下決定。另一個先看見成品再決定的例子，見訂製招牌付款前先看成品。

不適合的情況

• 尚無建築模型與室內渲染的專案。互動路徑建立在這兩項素材上，素材備齊後再進入網頁開發。
• 規模小、戶型單一的專案。單棟少戶時，一組全景加平面圖就足以呈現，不需要整棟選層的層級。
• 需要在網頁上即時顯示可售狀態與價格的專案。這條路徑呈現的是空間，銷控資料需另行規劃串接。

開始前要準備什麼

需要先備妥四項。

• 建築模型與室內渲染由誰製作，母檔的大小與格式
• 戶數、戶型與全景的張數
• 買家主要用手機還是桌機，手機要保留哪些功能
• 周邊地標清單，以及日夜景的需求

費用由什麼決定，見3D 網站的費用由什麼決定。備妥之後，可以討論看屋網站的規劃。