three.js,webGL,3D库房,3D机房
今天我们来讨论一下如何使用当前流行的WebGL技术搭建一个库房并且实现实时有效交互
第一步、搭建一个3D库房首先你得知道库房长啥样，我们先来瞅瞅库房长啥样（这是我在网上找的一个库房图片，百度了“库房”一下，找不到合适的全景，我们也只能窥一斑思全豹了，就它了，特此声明：此图片归原作者所有 非本人所拍，拿来只是给读者做个案例）
技术交流 [email protected]
交流微信：
如果你有什么要交流的心得 可邮件我
下面是我用webgl做出来的3D效果图（当前展示没有货物时的整体模拟）：
第二部、开干
1、 首先我们创建一个页面，引入各种需要的库文件
<script src="/js/jquery-2.2.2.js"></script>
<script src="/js/commonFunction.js"></script>
<script src="../js/tldesign3D/tl3DLoadData.js"></script>
<script src="/js/tldesign3D/tlcoreBSP.js"></script>
<script src="/js/tldesign3D/tlcoretween.js"></script>
<script src="/js/tldesign3D/sourse/Detector.js"></script>
<script src="/js/tldesign3D/sourse/OBJLoader.js"></script>
<script src="../js/tldesign3D/sourse/ParticleEngine.min.js"></script>
<script src="/js/tldesign3D/tlcoreControls.js"></script>
<script src="/js/tldesign3D/TransformControls.js"></script>
<script src="/js/tldesign3D/stats.min.js"></script>
<script src="/libs/layer/layer.js"></script>
2、开始写代码
a、搭建场景，要想webGL 3D展示 首先要创建画布，搭建场景
创建一个div 放置画布
初始化画布与场景
好了 就这么简单 所有需要的3D场景、渲染器、摄像机等等基础已经搭建好了
b、开始搭建建筑
先创建地板，分析一下 这个地板主要是绿色地板 加上黄色标线、我们可以让美工先将地板所需要的贴图画好，也可以直接自己画用模型创建，这里我们可以自己画
效果酱紫的：
紧接着我来创建围墙，为了便于用户操控，库房的顶部不用画
这时候有点样子了 有点感觉了，下面就是细节了 正所谓细节决定成败，即使是个演示，我们也得添加窗户 门 盆栽 窗台 门框什么的
b、搭建货架 货物等等
基础场景已经搭建好了 下面就是搭建货架了
添加36个货架之后，整个场景的帧率变成了14帧 这样的体验效果是非常不好的
所以需要调用优化算法 将场景总物体的画布算法进行优化
最后得到结果是场景帧率又回到了60帧
好了 ，第一课先讲到这里吧
下集预告：
第二课我们将详细讲解如何添加货物，货架容量管理、以及动态操作货物上下架 、厂房的温湿度 空调 通风 防火 消防定位等操作
通过可视化操作 直接控制厂房中各种具体设备
技术交流咨询邮箱：[email protected]
欢迎伙伴们一起探讨交流。