很长一段时间没有写3D库房,3D密集架相关的效果文章了，刚好最近有相关项目落地，索性总结一下
与之前我写的3D库房密集架文章《如何用webgl(three.js)搭建一个3D库房,3D密集架,3D档案室,-第二课》相比，本次做了一些效果上的升级，以及更加贴合用户应用实际。
密集架库房再档案管理，土壤监测，标本存储等各个行业应用的比较多，从早期的货架到后来的手摇式密集架再到现在的全自动密集架，硬件上都做了升级改进。
在环境、安防监控这一块，密集架方案提供商也配套的加上了八方感知，视频监控，温湿度一体机，自动书架，智能门禁等各种设备。
这篇文章我们主要记录讲解使用webgl(three.js)实现3D可视化密集架方案以及实现代码。
技术交流
交流微信：
如果你有什么要交流的心得 可邮件我
闲话少叙，我们进入正题：
一、主库房功能效果，以及其特效实现代码
首先我们先看看库房效果以及当前实现的3d密集架的一些功能
1.1、主界面效果，这个库房分了6个区域，多个房间拐角，后面我们还会展示一些拐角房间的内部效果，那是一个虚拟展厅。效果如下：
1.2、选择点击密集架，可以看到当前密集架的一些统计信息，例如面数，层数，节数（列），还有利用率等。
对于全自动密集架，我们还可以通过协议对接，对密集架进行控制，开架，打开通道，合架等。效果如下：
实现方式：
移动密集架，合并密集架，重点，难点在于计算密集架移动距离，每次移动密集架的个数，以及记录当前密集架的位置
我才用的时分区计算，各个突破，通过配置文件的方式记录固定架，以及每个架子的有效移动方向
具体实现如下：
首先通过配置的方式，记录每个架子的初始态，对于一个库房来说，不用写逻辑代码，直接配置还是比较方便的
然后再通过写通用方法，实现每个架子的移动与合并方案
1.3、密集架支持通风，锁定、解锁、自检等操作，并配有相关动画。效果如下：
这里我们通过导入通风模型的方式来实现，当通风打开时，我们载入通风动画模型，然后定时销毁即可
实现如下：
与通风动画类似，我们通过载入锁动画模型，实现如下：
1.4、库房内安装有区域控制器，八防感知系统等设备。点击设备可以看到其实时监控数据，效果如下：
这就比较简单了，我们只需要获取到模型的位置，再转换成屏幕的二维位置，然后再对应的位置上加上tips即可，这里我用的时layer.tips
实现如下：
二、虚拟小库房的效果与实现方式
项目中除了大库房的实际应用，还涉及到一个小库房展厅的各种设备接入与实现。
2.1、库房中，接入了轨道摄像机，普通摄像机，温湿度一体机，声光报警灯，灯控开关，门禁，rfid门卡，八防感知，区域控制器等等。小库房主界面效果如下：
2.2、由于小库房展厅的密集架没那么多，这里的打开密集架通道，我们可以动过强耦合的方式，将移动位置直接写死再代码里
代码如下：
2.3、所有密集架都可以打开，查看内部详情，双击密集架，镜头定位推进，然后打开密集架的内部结构，效果如下：
2.4、当密集架中有档案数据时，3d架子内会自动在对应的位置显示档案盒，双击档案盒对应的格子，为了便于操控，我通过div弹窗的方式，将档案盒详细脊背展现出来，
点击脊背，还详细展示出档案盒内的文件链接列表，这就看具体数据了，可能时pdf world excel 亦或者时拍照存留的图片
具体实现如下：
2.5、控制轨道相机的位置，通过选择通道，改变轨道相机的位置
这个实现比较简单，我们只需要修改它的position属性即可，
2.6、控制门禁，实现远程开门，在三维里面反馈展示
具体实现：
2.7、控制温湿度一体机
这里实现，也是通过载入开关动画的方式
具体实现：
2.8、控制灯控系统
这里我们通过加上光照效果，实现方式是修改环境光显示隐藏的属性，即可达到灯光效果，由于全程可见，我们通过地面的阴影来体现灯光的开关。
具体实现：
2.9、声光报警器触发。
通过修改声光效果的属性来实现。
实现代码如下：
2.10、库房内搜索功能，可以通过关键之搜索，快速定位档案位置。
三、该篇总结
本篇文章主要介绍了3D密集架的功能与效果。并且对主要实现逻辑代码进行了讲解
后面的文章会对具体模型的实现方式进行讲解，由于篇幅原因，先讲到这里，后面持续更新。
亦或者通过下列方式交流：
邮箱交流
微信交流：
如果你有什么要交流的心得 可邮件我
其它相关文章：
使用webgl(three.js)创建3D机房，3D机房微模块详细介绍(升级版二)
如何用webgl(three.js)搭建一个3D库房-第一课
如何用webgl(three.js)搭建一个3D库房,3D密集架,3D档案室,-第二课
使用webgl(three.js)搭建一个3D建筑，3D消防模拟——第三课
使用webgl(three.js)搭建一个3D智慧园区、3D建筑，3D消防模拟，web版3D,bim管理系统——第四课
如何用webgl(three.js)搭建不规则建筑模型，客流量热力图模拟
使用webgl(three.js)搭建一个3D智慧园区、3D建筑，3D消防模拟，web版3D,bim管理系统——第四课（炫酷版一）
物联网3D，物业基础设施3D运维，使用webgl(three.js)与物联网设备结合案例。搭建智慧楼宇，智慧园区，3D园区、3D物业设施，3D楼宇管理系统——第八课
