基于Vue +Three.js技術的智慧樓宇前端設計與實現

摘要：隨著城市化進程的加速和物聯網技術的飛速發展，智慧樓宇作為智慧城市的重要組成部分，正逐漸成為現代建筑領域的熱點話題。文章介紹了一種基于Vue框架和Three.js技術的智慧樓宇監控大屏前端設計與實現的解決方案，滿足了用戶交互、實時數據展示和三維可視化的需求。該設計方案使用Vue框架做前端模塊整體開發，使用ECharts圖表插件進行樓宇統計信息展示，使用Three.js框架進行樓宇三維模型渲染。系統提供了分級瀏覽、面向對象搜索、遠程監控和閾值告警等功能，為用戶提供一種高效、直觀、友好的智慧樓宇前端交互體驗。

關鍵詞：Vue框架；Three.js；智慧樓宇；前端設計；三維可視化

中圖分類號： TP391""文獻標志碼： A

0"引言

智慧樓宇管理系統的技術研發和應用在國外起步較早，一些外資企業如江森、西門子、施耐德等已經在市場上占據了領先地位。這些企業通常提供高端的產品和解決方案并遵循國際標準化規范進行研發和生產。在國內，智慧樓宇技術的發展日益成熟，其研究和應用領域正逐步發展，不僅涉及建筑自動化，還包括能源管理、環境監控、安全管理等多方面的應用研究。

本文是在融合物聯網、人工智能、軟件開發等多種信息技術構建一套完整智慧樓宇體系結構的背景下進行的，是一種基于Vue框架+Three.js技術的智慧樓宇前端系統設計方案，旨在通過集成這2種技術，構建一個既滿足用戶交互需求，又能實現實時數據展示和三維可視化的智慧樓宇前端系統。該前端系統的設計與實現主要包括：環境監測、樓控系統、安防系統、消防系統和供/配電系統等模塊^［1］。本文研究為智慧樓宇前端開發提供了一種新的思路和方法，也為未來智慧樓宇的發展和應用提供了一定的參考和借鑒，更為提升樓宇管理效率和用戶體驗做出積極貢獻。

1"關鍵技術

1.1"Vue前端框架

Vue.js（通常簡稱為“Vue”）是一個用于構建用戶界面的漸進式JavaScript框架，易于上手，也非常靈活，能夠與各種項目規模相匹配，從單頁應用到復雜的單頁應用程序（Single Page Application，SPA）。其核心特性有組件化、響應式、指令（Directives）、虛擬DOM等。除此之外，Vue還擁有一個活躍的社區和豐富的生態系統，包括各種官方和第三方的插件、工具、庫等，可以滿足開發過程中的各種需求。

1.2"Three.js技術

隨著主流瀏覽器對HTML5和WebGL（Web Graphics Library）的全面支持，可以讓前端頁面無須借助任何插件就能高效直接地導入、編輯和渲染三維模型和場景。WebGL是一種在網頁瀏覽器中渲染3D圖形的API，它基于OpenGL ES 2.0，允許開發者使用JavaScript和HTML5的lt;canvasgt;元素在網頁上創建和顯示復雜的3D圖形。目前，基于WebGL技術的上層框架比較多，常見的有Three.js、Babylon.js、PlayCanvas等。本文采用的是Three.js開源框架，適用于游戲開發、數據可視化等場景，其核心特性是簡單易用、功能豐富、跨平臺支持、開源免費等。

2"需求分析

2.1"功能性需求

智慧樓宇作為現代城市化進程中的重要組成部分，旨在提升樓宇管理效率、優化資源利用、增強用戶體驗、保障安全及促進可持續發展。系統的功能性需求是達成以上目標的基本保障，本研究涉及的功能性需求是現代智慧樓宇系統的典型應用，主要包括智能安防、智能運維、環境監測等模塊。模塊結構如圖1所示。

本文主要涉及上述功能性需求的前端頁面布局、組件化開發、三維模型的導入與展示、用戶交互、后端接口調用等技術的設計與實現。

2.2"非功能性需求

智慧樓宇的非功能性需求是智慧樓宇系統設計和開發過程中不可忽視的方面，關乎系統的整體性能和用戶體驗，主要包括以下幾個重要的非功能性需求（見表1）。

前端設計與實現主要滿足了系統的美觀與易用性方面的需求，比如界面友好性、易操作性、易理解性和差錯防御性等。前端開發也會在一定程度上影響系統的性能需求，比如前端框架的選取與組件的開發會影響頁面加載與數據展示的速度，三維模型的導入與優化會影響模型在頁面中加載時間與展示效果的流暢性等。

3"系統設計

3.1"總體架構設計

一套完整的智慧樓宇系統的開發涉及物聯網、人工智能、三維建模、前后端開發、測試部署等多種技術的有效融合。首先，須要組建物聯網絡，利用各種物聯網設備、傳感器、智能終端等完成信息采集并借助物聯網關完成數據的轉換、傳輸和存儲。其次，利用后端開發語言如Python、Java等進行業務處理邏輯接口的開發和AI建模與訓練。再次，利用三維建模工具如SketchUp、3ds Max等構建園區和樓宇的三維模型并導出為Three.js能夠識別的數據格式如FBX、gltf等供前端頁面展示。最后，使用Vue、Three.js、Ajax等前端開發語言進行頁面搭建、三維模型導入與渲染、用戶交互設計等，最終實現數據的頁面展示和智能設備的遠程控制等功能^［2］。系統總體架構如圖2所示。

3.2"Vue前端開發設計

3.2.1"Vue組件化開發設計

Vue組件化開發是將一個大的應用拆分成若干個小的、獨立的、可復用的組件。本次前端開發的組件主要包括視圖組件（又稱“頁面級組件”）和可復用組件2種^［3］。前者用于頁面級功能的整體布局設計，一般通過路由地址進行跳轉鏈接，復用性較差；后者作為某一個功能實現過程中的局部功能點，一般被嵌入視圖組件內部使用，復用性較強。本次研究中組件內部結構及其關系如圖3所示。

3.2.2"Vuex狀態管理設計

為了解決業務功能實現過程中的共享狀態、數據通信問題，本項目引用了Vuex狀態管理機制。在mutations.js文件中以對象的形式定義了當前頭部導航點擊的索引項、左側菜單欄中選中的一二級菜單ID、當前選中的樓號、當前樓宇模型中交互的樓層號等信息。這些數據可以在全局控制菜單樣式、路由跳轉、當前樓宇的設備信息展示、當前樓層的水電燃氣等能源統計時起到組件之間數據共享的作用。

3.2.3"前后端通信設計

前端頁面展示的所有動態數據都是由后端接口提供的，因此前后端通信是必然的。本項目根據頁面展示數據的實時性要求，將數據分為3類，分別采用3種不同的通信方式進行處理。對于實時性要求不高或者通過事件觸發才獲取的數據采用傳統的“請求/響應”方式，比如在組件的mounted事件或click事件中以Ajax的形式向后端接口發送請求，請求成功后方可從服務端獲取數據。比如系統中的通知通告模塊、人員統計和能耗統計等模塊，這類數據實時性要求不高。環境監測、設備管理、車輛管理等模塊中的數據有一定的實時性要求，但又不是很緊急，類似于這樣的模塊可采用http的輪詢機制，由客戶端定期向服務器發送請求，從服務器端周期性地獲取新數據。而安防系統、消防系統、異常告警等模塊對數據的實時性要求非常高，一旦服務器有新數據產生就應立刻推送給前端，因此，這些模塊采用WebSocket即時通信機制，在服務器和客戶端建立一個持久、高效的全雙工通信機制。以上通信設計方案既可以滿足功能需求的實現，又能夠減輕服務器的帶寬壓力。

3.3"Three.js三維場景設計

3.3.1"三維模型渲染設計

Three.js封裝了 WebGL 的底層操作，通過提供一系列的高級接口和對象，大大簡化了 WebGL 的使用，而無須開發者深入處理 WebGL 的復雜著色器編程或渲染循環^［4］。一個完整的3D環境通常包含以下元素：場景、相機、幾何體、材質、光源、渲染器和控制器。場景是模型、光源等元素的容器，是完成三維渲染的基礎。幾何體和材質構成了要渲染的三維模型，可以使用Three.js的API自建模型，也可以利用3D建模工具建好模型后導入場景。本項目要渲染的三維園區場景和樓宇模型比較復雜，因此須要建模工程師事先使用SketchUp等工具創建好模型后，再導入場景。光源在Three.js中用于模擬現實世界中的光線，它們決定了場景中物體的可見性和外觀，也是場景中的一個重要元素。相機和控制器決定了視角的位置、方向、范圍以及視覺焦點的位置，決定了用戶從哪個角度和位置觀察場景。渲染器是Three.js中負責將3D場景中的物體、光源等轉換為可以在屏幕上顯示的圖像，本項目中選擇的渲染器是WebGLRenderer 。三維模型的渲染過程如圖4所示。

3.3.2"三維模型交互設計

在三維模型交互功能設計中，用戶須要與頁面中的三維模型進行交互^［5］，例如通過點擊樓宇模型獲取當前樓層的用電量、用水量、用氣量等能源統計信息。然而三維模型的頂點坐標（稱為“三維坐標”或“世界坐標”）已經在模型渲染的時候轉為二維坐標（又稱“屏幕坐標”），而被存儲的模型數據又是與三維模型坐標關聯的。因此，在與三維模型交互時，須要完成坐標轉換、射線拾取、信息展示等操作，具體步驟如下。

第一步：添加交互事件。通過監聽鼠標和觸摸事件來捕捉用戶交互動作中的二維坐標信息，再利用

THREE.Vector3（）.unproject（）方法將二維屏幕坐標轉為三維世界坐標。

第二步：射線拾取。使用射線拾取技術在用戶點擊或觸摸位置的三維坐標與相機對象之間建立一條射線，然后調用射線對象的intersectObjects（）方法獲取射線與場景中模型相交的三維模型中的對象，即被射線選中的所有三維對象^［6］。

第三步：更新模型狀態。遍歷所有被射線選中的三維對象，根據條件更新模型要展示的數據信息。

4"前端實現

4.1"Vue前端開發部分代碼

利用Vue前端框架的組件化開發思想、全局狀態管理等強大功能，能夠完成智慧樓宇系統的頁面總體布局、數據實時監測、異常告警等功能。設備管理組件中的水泵信息展示部分的代碼如下。

lt;！-- 水泵區域 --gt;

lt;div class=\"shuibeng-area fx\" v-if=\"1\"gt;

lt;home-box"height=\"1.351\"""box-title=\"水泵\""class=\"menu-1\""：border-image=\"true\"""title-padding-top=\"0.02rem\"gt;

lt;div class=\"menu-1-body f-jcac\"gt;

lt;divgt;""lt;strong class=\"f-jc\"gt;{{waterList}}lt;/stronggt; lt;spangt;設備總數lt;/spangt;lt;spangt;已開啟lt;/spangt;lt;spangt;已關閉lt;/spangt;

lt;/divgt;

lt;/divgt;

lt;/home-boxgt;

lt;！-- 水泵的右側編號板塊 --gt;

lt;el-row ：gutter=\"5\" class=\"shuibeng-num-area\" ：style=\"{'padding-top'：paddingTopMin}\"gt;

lt;el-col"：xs=\"12\""：sm=\"12\""：md=\"12\""：lg=\"6\""：xl=\"6\"

v-for=\"（item，index）in waterList\"""：key=\"index\""gt;

……

4.2"Three.js三維模型渲染部分代碼

經過上述對Three.js技術在三維模型應用中的分析和設計，利用其強大的API，能夠比較方便地完成樓宇模型在頁面中的三維展示，其核心代碼與實驗運行結果如下。

var scene = new THREE.Scene（）;//創建場景

var camera = new THREE.PerspectiveCamera（75， window.innerWidth / window.innerHeight， 0.1， 1000）;//創建相機

var renderer = new THREE.WebGLRenderer（）;//創建渲染器

var loader = new THREE.GLTFLoader（）;//創建模型加載器

THREE.DRACOLoader.setDecoderPath（ '' ）;

loader.setDRACOLoader（ new THREE.DRACOLoader（） ）;

var url = sceneInfo.url;

loader.load（ url，function（data） {//加載模型

var gltf = data;

var object = gltf.scene;

……

scene.add（ object ）;//加載到場景中

renderer.render（ scene， camera）; //3D場景渲染

}

5"結語

本文是在大學科技園智慧樓宇建設和東三環智慧公園建設2個真實項目背景下進行的。2個項目建設過程中都涉及硬件的嵌入式開發和軟件的物聯網、大數據、人工智能等新一代信息技術。本文在分析了系統總體結構后，主要針對物業或指揮中心管理人員使用的智慧監控大屏前端軟件部分進行設計與實現。利用Vue前端開發框架進行了項目前端系統的開發，使用Three.js技術導入樓宇三維模型，實現樓宇三維展示和可視化控制。本研究的技術難點是優化Three.js場景的性能，包括減少渲染調用、合理使用幾何體和材質、優化光源和陰影等，目前在這方面尚存在不足，具體表現為：合并幾何體以減少繪制調用次數、使用BufferGeometry提升渲染效率、調整紋理圖片尺寸和壓縮以減少內存占用等，這將是后續研究的重點。

參考文獻

［1］肖薇，秦素玲，馬麗君.基于BIM+IoT的智慧樓宇運維管理平臺［J］.綠色建造與智能建筑，2024（2）：25-29.

［2］黃澈，張萌，王杰，等.基于Three.js和物聯網技術的糧庫3D可視化智能系統［J］.物聯網技術，2023（12）：50-53，56.

［3］李娟，宋玉娥，郭蕊.基于Vue框架的數據可視化工具前端系統的設計與實現［J］.北京工業職業技術學院學報，2024（2）：18-23.

［4］雍晨天.基于WebGL的數據中心三維可視化系統設計與研究［J］.中國管理信息化，2023（1）：153-156.

［5］林杰，祝江林，肖強，等.基于Three.js引擎模塊的隧道三維可視化系統設計與實現［J］.武漢理工大學學報（信息與管理工程版），2023（5）：795-800.

［6］蘇龍生，鄧斯堯，周佳瑩，等.基于Three.js的虛擬模型3D交互展示研究及實現［J］.科技創新與應用，2024（1）：43-46.

（編輯"王雪芬）

Design and implementation of smart building front end based on Vue+Three.js technology

SHI "Jianguo， ZHOU "Meng^*， LIU "Lihua， HAO "Yanrong， YAO "Jingfa， XUE "Yuqian

（Hebei Software Institute， Baoding 071000， China）

Abstract： "With the acceleration of urbanization and the rapid development of IoT technology， smart buildings， as an important component of smart cities， are gradually becoming a hot topic in the field of modern architecture. This article introduces a solution for the front-end design and implementation of smart building monitoring screens based on Vue framework and Three.js technology， which meets the needs of user interaction， real-time data display， and 3D visualization. This design scheme uses Vue framework for the overall development of the front-end module， ECharts chart plugin for displaying building statistical information， Three.js framework for rendering building 3D models. The system provides functions such as hierarchical browsing， object-oriented search， remote monitoring， and threshold alarm， providing users with an efficient， intuitive， and friendly smart building front-end interaction experience.

Key words： Vue framework; Three.js；smart buildings; front end design; 3D visualization