基于Vue +Three.js技術(shù)的智慧樓宇前端設(shè)計(jì)與實(shí)現(xiàn)

摘要：隨著城市化進(jìn)程的加速和物聯(lián)網(wǎng)技術(shù)的飛速發(fā)展，智慧樓宇作為智慧城市的重要組成部分，正逐漸成為現(xiàn)代建筑領(lǐng)域的熱點(diǎn)話題。文章介紹了一種基于Vue框架和Three.js技術(shù)的智慧樓宇監(jiān)控大屏前端設(shè)計(jì)與實(shí)現(xiàn)的解決方案，滿足了用戶交互、實(shí)時(shí)數(shù)據(jù)展示和三維可視化的需求。該設(shè)計(jì)方案使用Vue框架做前端模塊整體開(kāi)發(fā)，使用ECharts圖表插件進(jìn)行樓宇統(tǒng)計(jì)信息展示，使用Three.js框架進(jìn)行樓宇三維模型渲染。系統(tǒng)提供了分級(jí)瀏覽、面向?qū)ο笏阉?、遠(yuǎn)程監(jiān)控和閾值告警等功能，為用戶提供一種高效、直觀、友好的智慧樓宇前端交互體驗(yàn)。

關(guān)鍵詞：Vue框架；Three.js；智慧樓宇；前端設(shè)計(jì)；三維可視化

中圖分類號(hào)： TP391""文獻(xiàn)標(biāo)志碼： A

0"引言

智慧樓宇管理系統(tǒng)的技術(shù)研發(fā)和應(yīng)用在國(guó)外起步較早，一些外資企業(yè)如江森、西門子、施耐德等已經(jīng)在市場(chǎng)上占據(jù)了領(lǐng)先地位。這些企業(yè)通常提供高端的產(chǎn)品和解決方案并遵循國(guó)際標(biāo)準(zhǔn)化規(guī)范進(jìn)行研發(fā)和生產(chǎn)。在國(guó)內(nèi)，智慧樓宇技術(shù)的發(fā)展日益成熟，其研究和應(yīng)用領(lǐng)域正逐步發(fā)展，不僅涉及建筑自動(dòng)化，還包括能源管理、環(huán)境監(jiān)控、安全管理等多方面的應(yīng)用研究。

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

1"關(guān)鍵技術(shù)

1.1"Vue前端框架

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

1.2"Three.js技術(shù)

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

2"需求分析

2.1"功能性需求

智慧樓宇作為現(xiàn)代城市化進(jìn)程中的重要組成部分，旨在提升樓宇管理效率、優(yōu)化資源利用、增強(qiáng)用戶體驗(yàn)、保障安全及促進(jìn)可持續(xù)發(fā)展。系統(tǒng)的功能性需求是達(dá)成以上目標(biāo)的基本保障，本研究涉及的功能性需求是現(xiàn)代智慧樓宇系統(tǒng)的典型應(yīng)用，主要包括智能安防、智能運(yùn)維、環(huán)境監(jiān)測(cè)等模塊。模塊結(jié)構(gòu)如圖1所示。

本文主要涉及上述功能性需求的前端頁(yè)面布局、組件化開(kāi)發(fā)、三維模型的導(dǎo)入與展示、用戶交互、后端接口調(diào)用等技術(shù)的設(shè)計(jì)與實(shí)現(xiàn)。

2.2"非功能性需求

智慧樓宇的非功能性需求是智慧樓宇系統(tǒng)設(shè)計(jì)和開(kāi)發(fā)過(guò)程中不可忽視的方面，關(guān)乎系統(tǒng)的整體性能和用戶體驗(yàn)，主要包括以下幾個(gè)重要的非功能性需求（見(jiàn)表1）。

前端設(shè)計(jì)與實(shí)現(xiàn)主要滿足了系統(tǒng)的美觀與易用性方面的需求，比如界面友好性、易操作性、易理解性和差錯(cuò)防御性等。前端開(kāi)發(fā)也會(huì)在一定程度上影響系統(tǒng)的性能需求，比如前端框架的選取與組件的開(kāi)發(fā)會(huì)影響頁(yè)面加載與數(shù)據(jù)展示的速度，三維模型的導(dǎo)入與優(yōu)化會(huì)影響模型在頁(yè)面中加載時(shí)間與展示效果的流暢性等。

3"系統(tǒng)設(shè)計(jì)

3.1"總體架構(gòu)設(shè)計(jì)

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

3.2"Vue前端開(kāi)發(fā)設(shè)計(jì)

3.2.1"Vue組件化開(kāi)發(fā)設(shè)計(jì)

Vue組件化開(kāi)發(fā)是將一個(gè)大的應(yīng)用拆分成若干個(gè)小的、獨(dú)立的、可復(fù)用的組件。本次前端開(kāi)發(fā)的組件主要包括視圖組件（又稱“頁(yè)面級(jí)組件”）和可復(fù)用組件2種^［3］。前者用于頁(yè)面級(jí)功能的整體布局設(shè)計(jì)，一般通過(guò)路由地址進(jìn)行跳轉(zhuǎn)鏈接，復(fù)用性較差；后者作為某一個(gè)功能實(shí)現(xiàn)過(guò)程中的局部功能點(diǎn)，一般被嵌入視圖組件內(nèi)部使用，復(fù)用性較強(qiáng)。本次研究中組件內(nèi)部結(jié)構(gòu)及其關(guān)系如圖3所示。

3.2.2"Vuex狀態(tài)管理設(shè)計(jì)

為了解決業(yè)務(wù)功能實(shí)現(xiàn)過(guò)程中的共享狀態(tài)、數(shù)據(jù)通信問(wèn)題，本項(xiàng)目引用了Vuex狀態(tài)管理機(jī)制。在mutations.js文件中以對(duì)象的形式定義了當(dāng)前頭部導(dǎo)航點(diǎn)擊的索引項(xiàng)、左側(cè)菜單欄中選中的一二級(jí)菜單ID、當(dāng)前選中的樓號(hào)、當(dāng)前樓宇模型中交互的樓層號(hào)等信息。這些數(shù)據(jù)可以在全局控制菜單樣式、路由跳轉(zhuǎn)、當(dāng)前樓宇的設(shè)備信息展示、當(dāng)前樓層的水電燃?xì)獾饶茉唇y(tǒng)計(jì)時(shí)起到組件之間數(shù)據(jù)共享的作用。

3.2.3"前后端通信設(shè)計(jì)

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

3.3"Three.js三維場(chǎng)景設(shè)計(jì)

3.3.1"三維模型渲染設(shè)計(jì)

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

3.3.2"三維模型交互設(shè)計(jì)

在三維模型交互功能設(shè)計(jì)中，用戶須要與頁(yè)面中的三維模型進(jìn)行交互^［5］，例如通過(guò)點(diǎn)擊樓宇模型獲取當(dāng)前樓層的用電量、用水量、用氣量等能源統(tǒng)計(jì)信息。然而三維模型的頂點(diǎn)坐標(biāo)（稱為“三維坐標(biāo)”或“世界坐標(biāo)”）已經(jīng)在模型渲染的時(shí)候轉(zhuǎn)為二維坐標(biāo)（又稱“屏幕坐標(biāo)”），而被存儲(chǔ)的模型數(shù)據(jù)又是與三維模型坐標(biāo)關(guān)聯(lián)的。因此，在與三維模型交互時(shí)，須要完成坐標(biāo)轉(zhuǎn)換、射線拾取、信息展示等操作，具體步驟如下。

第一步：添加交互事件。通過(guò)監(jiān)聽(tīng)鼠標(biāo)和觸摸事件來(lái)捕捉用戶交互動(dòng)作中的二維坐標(biāo)信息，再利用

THREE.Vector3（）.unproject（）方法將二維屏幕坐標(biāo)轉(zhuǎn)為三維世界坐標(biāo)。

第二步：射線拾取。使用射線拾取技術(shù)在用戶點(diǎn)擊或觸摸位置的三維坐標(biāo)與相機(jī)對(duì)象之間建立一條射線，然后調(diào)用射線對(duì)象的intersectObjects（）方法獲取射線與場(chǎng)景中模型相交的三維模型中的對(duì)象，即被射線選中的所有三維對(duì)象^［6］。

第三步：更新模型狀態(tài)。遍歷所有被射線選中的三維對(duì)象，根據(jù)條件更新模型要展示的數(shù)據(jù)信息。

4"前端實(shí)現(xiàn)

4.1"Vue前端開(kāi)發(fā)部分代碼

利用Vue前端框架的組件化開(kāi)發(fā)思想、全局狀態(tài)管理等強(qiáng)大功能，能夠完成智慧樓宇系統(tǒng)的頁(yè)面總體布局、數(shù)據(jù)實(shí)時(shí)監(jiān)測(cè)、異常告警等功能。設(shè)備管理組件中的水泵信息展示部分的代碼如下。

lt;！-- 水泵區(qū)域 --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;設(shè)備總數(shù)lt;/spangt;lt;spangt;已開(kāi)啟lt;/spangt;lt;spangt;已關(guān)閉lt;/spangt;

lt;/divgt;

lt;/divgt;

lt;/home-boxgt;

lt;！-- 水泵的右側(cè)編號(hào)板塊 --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三維模型渲染部分代碼

經(jīng)過(guò)上述對(duì)Three.js技術(shù)在三維模型應(yīng)用中的分析和設(shè)計(jì)，利用其強(qiáng)大的API，能夠比較方便地完成樓宇模型在頁(yè)面中的三維展示，其核心代碼與實(shí)驗(yàn)運(yùn)行結(jié)果如下。

var scene = new THREE.Scene（）;//創(chuàng)建場(chǎng)景

var camera = new THREE.PerspectiveCamera（75， window.innerWidth / window.innerHeight， 0.1， 1000）;//創(chuàng)建相機(jī)

var renderer = new THREE.WebGLRenderer（）;//創(chuàng)建渲染器

var loader = new THREE.GLTFLoader（）;//創(chuàng)建模型加載器

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 ）;//加載到場(chǎng)景中

renderer.render（ scene， camera）; //3D場(chǎng)景渲染

}

5"結(jié)語(yǔ)

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

參考文獻(xiàn)

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

［2］黃澈，張萌，王杰，等.基于Three.js和物聯(lián)網(wǎng)技術(shù)的糧庫(kù)3D可視化智能系統(tǒng)［J］.物聯(lián)網(wǎng)技術(shù)，2023（12）：50-53，56.

［3］李娟，宋玉娥，郭蕊.基于Vue框架的數(shù)據(jù)可視化工具前端系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)［J］.北京工業(yè)職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2024（2）：18-23.

［4］雍晨天.基于WebGL的數(shù)據(jù)中心三維可視化系統(tǒng)設(shè)計(jì)與研究［J］.中國(guó)管理信息化，2023（1）：153-156.

［5］林杰，祝江林，肖強(qiáng)，等.基于Three.js引擎模塊的隧道三維可視化系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)［J］.武漢理工大學(xué)學(xué)報(bào)（信息與管理工程版），2023（5）：795-800.

［6］蘇龍生，鄧斯堯，周佳瑩，等.基于Three.js的虛擬模型3D交互展示研究及實(shí)現(xiàn)［J］.科技創(chuàng)新與應(yīng)用，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