如何用webgl(three.js)搭建一个3D库房-第一课

今天我们来讨论一下如何使用当前流行的WebGL技术搭建一个库房并且实现实时有效交互

第一步、搭建一个3D库房首先你得知道库房长啥样，我们先来瞅瞅库房长啥样（这是我在网上找的一个库房图片，百度了“库房”一下，找不到合适的全景，我们也只能窥一斑思全豹了，就它了，特此声明：此图片归原作者所有 非本人所拍，拿来只是给读者做个案例）

下面是我用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 放置画布

　　　　　　

 <div id="canvas-frame" class="canvas_frame"></div>

　　　　　　初始化画布与场景

 1     tl3dCoreObj = new tl3DCore();
 2     tl3dCoreBusiness = new TL3DCoreBusiness();
 3     var initOption = {
   //画布参数
 4         antialias: true,
 5         loadSyn: false,//是否启用异步加载
 6         showHelpGrid: false,//是否显示网格线
 7         clearCoolr: 0x002323,
 8         clearColorOp: 1,
 9     };
10     var Aobjects=[];//对象列表
11     tl3dCoreObj.inittl3DCore('canvas-frame', initOption, Aobjects);
12     tl3dCoreObj.start();//开始吧

　　　　　好了 就这么简单 所有需要的3D场景、渲染器、摄像机等等基础已经搭建好了 

　　　　b、开始搭建建筑

　　　　　　先创建地板，分析一下 这个地板主要是绿色地板 加上黄色标线、我们可以让美工先将地板所需要的贴图画好，也可以直接自己画用模型创建，这里我们可以自己画

　　　　　　

Aobjects.push({
    "show": true,
    "uuid": "",
    "name": "floor",
    "objType": "floor",
    "length": 2000,
    "width": 1500,
    "height": 10,
    "x": 0, "y": 0, "z": 0,
    "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 1529655, "side": 1, "opacity": 1 } } },
    "showSortNub": 4,
    "animation": null,
    "dbclickEvents": null,
    "scale": { "x": 1, "y": 1, "z": 1 },
});
Aobjects.push({ "show": true, "uuid": "", "name": "line_5", "objType": "line", "length": 3, "width": 40, "height": 2, "x": 601.986, "y": 8.801, "z": -730.723, "style": { "skinColor": 16777215, }, "showSortNub": 5, })

效果酱紫的：

　　　　紧接着我来创建围墙，为了便于用户操控，库房的顶部不用画

　　　　　　　　　　

Aobjects.push(
 { "show": true, "uuid": 
"", "name": "wall_16",
 "objType": "holeCube", 
"length": 2000, "width": 10, "height": 200,
 "rotation": { "0": { "direction": "x", "degree": 0 }, "1": { "direction": "y", "degree": 0 }, "2": { "direction": "z", "degree": 0 } }, "x": 0, "y": 100, "z": -755, 
"style": { "skinColor": 9095650, "skin": { "skin_up": { "skinColor": 14540253 }, "skin_down": { "skinColor": 14540253 }, "skin_fore": { "skinColor": 14540253 }, "skin_behind": { "skinColor": 14540253 }, "skin_left": { "skinColor": 14610158 }, "skin_right": { "skinColor": 14540253 } } }, "childrens": [{ "op": "-", "show": true, "uuid": "", "name": "doorhole1", "objType": "cube", "width": 10, "height": 200, "length": 220, "x": -500, "y": 0, "z": 0, "style": { "skinColor": 9095650 } },
 { "op": "-", "show": true, "uuid": "", "name": "doorhole2", "objType": "cube", "width": 10, "height": 200, "length": 220, "x": 500, "y": 0, "z": 0, "style": { "skinColor": 9095650 } }, { "op": "-", "show": true, "uuid": "", "name": "winhole1", "objType": "cube", "width": 10, "height": 120, "length": 160, "x": 200, "y": 20, "z": 0, "style": { "skinColor": 9095650 } }, 
{ "op": "-", "show": true, "uuid": "", "name": "winhole2", "objType": "cube", "width": 10, "height": 120, "length": 160, "x": 0, "y": 20, "z": 0, "style": { "skinColor": 9095650 } }, 
{ "op": "-", "show": true, "uuid": "", "name": "winhole3", "objType": "cu