樹像一排西蘭花的時候，先別急著承包整個村：讀一篇 Vue 加 Three.js 大屏踩坑記

10 月 12 日，開發者「踩著兩條蟲」在掘金發布了一篇長文，記錄自己用 Blender、Vue、Three.js、ECharts 與 Mock.js 做出一座名為「青溪村」的可互動三維數字鄉村大屏的完整過程。文章僅一天左右的時間就累積近兩百次閱讀，討論的對象並非新框架或新工具，而是把「畫面做出來」與「真的能交付」之間那段距離講得非常具體。

「自然」沒有 npm 指令可以安裝

這個專案最誠實的部分，是承認美感問題沒有套件可解。基礎樣板載入模型、選取建築、切換鏡頭都能動，但規則排列的房屋與球狀樹冠，離參考插畫的自然層次還很遠。作者形容繼續鋪細節只會得到「更多、排列更整齊的西蘭花」。

他改用的小樣方法值得做視覺相關前端的人記下來：先挑一個包含主要難點的局部，包括中央河道、前景石橋與五棟民居，在固定鏡頭、固定資產、固定評審標準之下打磨到過關，才擴展到全村。他甚至校驗瀏覽器載入 GLB 檔的 SHA256，確認前後比較的是同一份資產，避免舊版本混進新模型的畢業答辯。

另外一條判斷也相當少見：技術通過與視覺通過分開簽字。小樣階段曾出現模型單元與瀏覽器互動全部通過、但對照參考圖仍不及格的狀況，此時不讓「測試全綠」替審美背書，而是回頭繼續打磨局部。

三維告訴你對象在哪裡，業務資料告訴你對象是什麼

村莊最終有 32 棟建築，業務演示包含四個村組、八塊田、六個服務點與 24 條環境問題。規模不大，但模型、統計卡片、列表與詳情必須指向同一個物件，否則「點的是民居，打開的詳情卻是隔壁服務中心」。

文章把幾條邊界釘得很清楚：建築用穩定 ID 關聯，點到屋頂或牆面子網格後沿父節點查找；標籤有獨立錨點，不用整棟建築的包圍盒中心充當萬能位置；Blender 到 Web 的座標轉換只發生在邊界，前端不再轉第二次。

包圍盒那段尤其有共鳴。合併院落之後，包圍盒中心落在空庭院上，自動化測試往那裡一點自然點不到房子。問題看起來像拾取壞了，實際上是測試根本沒點到目標。這類偽裝成互動 bug 的測試設計問題，在各種點擊自動化場景裡都很常見，與我們先前整理過的AI 面試的計時與題型機制有類似的底層邏輯：真正決定成敗的往往是不顯眼的前置設計。

失敗隔離，是大屏專案的交付底線

業務資料也被賦予自己的「戶籍」。一個非同步快照覆蓋統計與空間明細，互動不重複請求；模型裡的住戶佔位欄位不拿來充當 952 戶的業務統計，示意田塊的幾何面積也不換算成真實畝數。

更實際的是失敗隔離：某個物件座標壞了，只停用它的定位與高亮，業務詳情照常能看；GLB 載入失敗，統計、列表與篩選繼續可用。三維場景掛掉不等於整塊大屏黑屏，這條界線在政企展示專案裡就是驗收與返工的差別。

給做三維視覺化的人三個可帶走的判斷

第一，前後對比必須固定鏡頭。相機一挪、光照一換，任何調整都能被包裝成史詩級升級，固定參數是唯一誠實的對照方式。

第二，小樣要能暴露問題，不能只挑最好看的角落。局部通過才有資格批量推廣，這對任何需要「數量產生規模」的視覺專案都適用。

第三，模型裡的示意資料與業務統計各守各的邊界。三維負責位置，資料負責身分，兩者有關聯但不能互相冒充答案。

這篇文章的價值不在於技術棧多新，而在於把一個常見的交付陷阱寫成了可操作的程序。對於被指派做數字園區、智慧工廠或數字鄉村大屏的前端工程師來說，這份踩坑紀錄幾乎可以直接當成專案檢查清單用。