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