很長一段時間沒有寫3D庫房,3D密集架相關(guān)的效果文章了，剛好最近有相關(guān)項目落地，索性總結(jié)一下
與之前我寫的3D庫房密集架文章《如何用webgl(three.js)搭建一個3D庫房,3D密集架,3D檔案室,-第二課》相比，本次做了一些效果上的升級，以及更加貼合用戶應用實際。
密集架庫房再檔案管理，土壤監(jiān)測，標本存儲等各個行業(yè)應用的比較多，從早期的貨架到后來的手搖式密集架再到現(xiàn)在的全自動密集架，硬件上都做了升級改進。
在環(huán)境、安防監(jiān)控這一塊，密集架方案提供商也配套的加上了八方感知，視頻監(jiān)控，溫濕度一體機，自動書架，智能門禁等各種設(shè)備。
這篇文章我們主要記錄講解使用webgl(three.js)實現(xiàn)3D可視化密集架方案以及實現(xiàn)代碼。
技術(shù)交流
交流微信：
如果你有什么要交流的心得 可郵件我
閑話少敘，我們進入正題：
一、主庫房功能效果，以及其特效實現(xiàn)代碼
首先我們先看看庫房效果以及當前實現(xiàn)的3d密集架的一些功能
1.1、主界面效果，這個庫房分了6個區(qū)域，多個房間拐角，后面我們還會展示一些拐角房間的內(nèi)部效果，那是一個虛擬展廳。效果如下：
1.2、選擇點擊密集架，可以看到當前密集架的一些統(tǒng)計信息，例如面數(shù)，層數(shù)，節(jié)數(shù)（列），還有利用率等。
對于全自動密集架，我們還可以通過協(xié)議對接，對密集架進行控制，開架，打開通道，合架等。效果如下：
實現(xiàn)方式：
移動密集架，合并密集架，重點，難點在于計算密集架移動距離，每次移動密集架的個數(shù)，以及記錄當前密集架的位置
我才用的時分區(qū)計算，各個突破，通過配置文件的方式記錄固定架，以及每個架子的有效移動方向
具體實現(xiàn)如下：
首先通過配置的方式，記錄每個架子的初始態(tài)，對于一個庫房來說，不用寫邏輯代碼，直接配置還是比較方便的
然后再通過寫通用方法，實現(xiàn)每個架子的移動與合并方案
1.3、密集架支持通風，鎖定、解鎖、自檢等操作，并配有相關(guān)動畫。效果如下：
這里我們通過導入通風模型的方式來實現(xiàn)，當通風打開時，我們載入通風動畫模型，然后定時銷毀即可
實現(xiàn)如下：
與通風動畫類似，我們通過載入鎖動畫模型，實現(xiàn)如下：
1.4、庫房內(nèi)安裝有區(qū)域控制器，八防感知系統(tǒng)等設(shè)備。點擊設(shè)備可以看到其實時監(jiān)控數(shù)據(jù)，效果如下：
這就比較簡單了，我們只需要獲取到模型的位置，再轉(zhuǎn)換成屏幕的二維位置，然后再對應的位置上加上tips即可，這里我用的時layer.tips
實現(xiàn)如下：
二、虛擬小庫房的效果與實現(xiàn)方式
項目中除了大庫房的實際應用，還涉及到一個小庫房展廳的各種設(shè)備接入與實現(xiàn)。
2.1、庫房中，接入了軌道攝像機，普通攝像機，溫濕度一體機，聲光報警燈，燈控開關(guān)，門禁，rfid門卡，八防感知，區(qū)域控制器等等。小庫房主界面效果如下：
2.2、由于小庫房展廳的密集架沒那么多，這里的打開密集架通道，我們可以動過強耦合的方式，將移動位置直接寫死再代碼里
代碼如下：
2.3、所有密集架都可以打開，查看內(nèi)部詳情，雙擊密集架，鏡頭定位推進，然后打開密集架的內(nèi)部結(jié)構(gòu)，效果如下：
2.4、當密集架中有檔案數(shù)據(jù)時，3d架子內(nèi)會自動在對應的位置顯示檔案盒，雙擊檔案盒對應的格子，為了便于操控，我通過div彈窗的方式，將檔案盒詳細脊背展現(xiàn)出來，
點擊脊背，還詳細展示出檔案盒內(nèi)的文件鏈接列表，這就看具體數(shù)據(jù)了，可能時pdf world excel 亦或者時拍照存留的圖片
具體實現(xiàn)如下：
2.5、控制軌道相機的位置，通過選擇通道，改變軌道相機的位置
這個實現(xiàn)比較簡單，我們只需要修改它的position屬性即可，
2.6、控制門禁，實現(xiàn)遠程開門，在三維里面反饋展示
具體實現(xiàn)：
2.7、控制溫濕度一體機
這里實現(xiàn)，也是通過載入開關(guān)動畫的方式
具體實現(xiàn)：
2.8、控制燈控系統(tǒng)
這里我們通過加上光照效果，實現(xiàn)方式是修改環(huán)境光顯示隱藏的屬性，即可達到燈光效果，由于全程可見，我們通過地面的陰影來體現(xiàn)燈光的開關(guān)。
具體實現(xiàn)：
2.9、聲光報警器觸發(fā)。
通過修改聲光效果的屬性來實現(xiàn)。
實現(xiàn)代碼如下：
2.10、庫房內(nèi)搜索功能，可以通過關(guān)鍵之搜索，快速定位檔案位置。
三、該篇總結(jié)
本篇文章主要介紹了3D密集架的功能與效果。并且對主要實現(xiàn)邏輯代碼進行了講解
后面的文章會對具體模型的實現(xiàn)方式進行講解，由于篇幅原因，先講到這里，后面持續(xù)更新。
亦或者通過下列方式交流：
郵箱交流
微信交流：
如果你有什么要交流的心得 可郵件我
其它相關(guān)文章：
使用webgl(three.js)創(chuàng)建3D機房，3D機房微模塊詳細介紹(升級版二)
如何用webgl(three.js)搭建一個3D庫房-第一課
如何用webgl(three.js)搭建一個3D庫房,3D密集架,3D檔案室,-第二課
使用webgl(three.js)搭建一個3D建筑，3D消防模擬——第三課
使用webgl(three.js)搭建一個3D智慧園區(qū)、3D建筑，3D消防模擬，web版3D,bim管理系統(tǒng)——第四課
如何用webgl(three.js)搭建不規(guī)則建筑模型，客流量熱力圖模擬
使用webgl(three.js)搭建一個3D智慧園區(qū)、3D建筑，3D消防模擬，web版3D,bim管理系統(tǒng)——第四課（炫酷版一）
物聯(lián)網(wǎng)3D，物業(yè)基礎(chǔ)設(shè)施3D運維，使用webgl(three.js)與物聯(lián)網(wǎng)設(shè)備結(jié)合案例。搭建智慧樓宇，智慧園區(qū)，3D園區(qū)、3D物業(yè)設(shè)施，3D樓宇管理系統(tǒng)——第八課
