2. 程式人生 > >如何用webgl(three.js)搭建一個3D庫房-第一課

如何用webgl(three.js)搭建一個3D庫房-第一課

阿新 • • 發佈：2017-11-26
com ima gn3 cool otto ttl 百度 core 4.6

今天我們來討論一下如何使用當前流行的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": "cube", "width": 10, "height": 120, "length": 160, "x": -200, "y": 20, "z": 0, "style": { "skinColor": 9095650 } },
 { "op": "-", "show": true, "uuid": "", "name": "winhole4", "objType": "cube", "width": 10, "height": 120, "length": 160, "x": 800, "y": 20, "z": 0, "style": { "skinColor": 9095650 } }, 
{ "op": "-", "show": true, "uuid": "", "name": "winhole5", "objType": "cube", "width": 10, "height": 120, "length": 160, "x": -800, "y": 20, "z": 0, "style": { "skinColor": 9095650 } }], "showSortNub": 16, "scale": { "x": 1, "y": 1, "z": 1 }})

技術分享圖片

這時候有點樣子了 有點感覺了，下面就是細節了 正所謂細節決定成敗，即使是個演示，我們也得添加窗戶 門 盆栽 窗臺 門框什麽的

{ "name": "pot2_3", "objType": "cylinder", "radiusTop": 16, "radiusBottom": 8, "height": 40, "segmentsX": 2, "segmentsY": 0, "openEnded": false, "position": { "x": -104.675, "y": 41.756, "z": -735 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 1.5707963267948966 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16776960, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_side": { "skinColor": 16777215, "opacity": 1, "imgurl": "../../img/3dImg/flower.gif" } } }, "showSortNub": 32, "show": true, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null },
    { "name": "pot3_3", "objType": "cylinder", "radiusTop": 16, "radiusBottom": 8, "height": 40, "segmentsX": 2, "segmentsY": 0, "openEnded": false, "position": { "x": -678.846, "y": 41.756, "z": -735 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 1.5707963267948966 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16776960, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_side": { "skinColor": 16777215, "opacity": 1, "imgurl": "../../img/3dImg/flower.gif" } } }, "showSortNub": 32, "show": true, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null },
    { "name": "pot4_3", "objType": "cylinder", "radiusTop": 16, "radiusBottom": 8, "height": 40, "segmentsX": 2, "segmentsY": 0, "openEnded": false, "position": { "x": 656.887, "y": 41.756, "z": -735 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 1.5707963267948966 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16776960, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_side": { "skinColor": 16777215, "opacity": 1, "imgurl": "../../img/3dImg/flower.gif" } } }, "showSortNub": 32, "show": true, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null },
    { "name": "pot2_2", "objType": "cylinder", "radiusTop": 16, "radiusBottom": 8, "height": 40, "segmentsX": 2, "segmentsY": 0, "openEnded": false, "position": { "x": -104.987, "y": 41.756, "z": -735 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16776960, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_side": { "skinColor": 16777215, "opacity": 1, "imgurl": "../../img/3dImg/flower.gif" } } }, "showSortNub": 32, "show": true, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null },
    { "name": "pot3_2", "objType": "cylinder", "radiusTop": 16, "radiusBottom": 8, "height": 40, "segmentsX": 2, "segmentsY": 0, "openEnded": false, "position": { "x": -678.595, "y": 41.756, "z": -735 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16776960, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_side": { "skinColor": 16777215, "opacity": 1, "imgurl": "../../img/3dImg/flower.gif" } } }, "showSortNub": 32, "show": true, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null },
    { "name": "pot4_2", "objType": "cylinder", "radiusTop": 16, "radiusBottom": 8, "height": 40, "segmentsX": 2, "segmentsY": 0, "openEnded": false, "position": { "x": 658.116, "y": 41.756, "z": -735 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16776960, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_side": { "skinColor": 16777215, "opacity": 1, "imgurl": "../../img/3dImg/flower.gif" } } }, "showSortNub": 32, "show": true, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null },
    { "show": true, "name": "doorLeft_44", "uuid": "", "actionSign": "doorLeft", "objType": "cube", "castShadow": false, "width": 4, "height": 190, "length": 104, "x": 553, "y": 100, "z": -755, "style": { "skinColor": 9095650, "skin": { "skin_up": { "skinColor": 5325886, "side": 1, "opacity": 1 }, "skin_down": { "skinColor": 5325886, "side": 1, "opacity": 1 }, "skin_fore": { "skinColor": 5325886, "side": 1, "opacity": 1 }, "skin_behind": { "skinColor": 5325886, "side": 1, "opacity": 1 }, "skin_left": { "skinColor": 5325886, "side": 1, "opacity": 1, "imgurl": "../../img/3dImg/door_left.png" }, "skin_right": { "skinColor": 5325886, "side": 1, "opacity": 1, "imgurl": "../../img/3dImg/door_right.png" } } }, "dbclickEvents": { "obj_eventParamInfo": [{ "name": "", "remark": "" }], "obj_event": "openLeftDoor(runobj,function(){});" }, "showSortNub": 44, "customType1": "", "customType2": "", "animation": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null },
    { "show": true, "uuid": "", "name": "door_case1", "objType": "cube2", "length": 15, "width": 15, "height": 190, "x": 388.523, "y": 100, "z": -754.724, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 14540253, "side": 1, "opacity": 1 }, "skin_down": { "skinColor": 14079702, "side": 1, "opacity": 1 }, "skin_fore": { "skinColor": 14079702, "side": 1, "opacity": 1, "imgurl": "../../img/images3D/1502887864239_2.jpg" }, "skin_behind": { "skinColor": 14079702, "side": 1, "opacity": 1, "imgurl": "../../img/images3D/1502887864239_2.jpg" }, "skin_left": { "skinColor": 14079702, "side": 1, "opacity": 1, "imgurl": "../../img/images3D/1502887864239_2.jpg" }, "skin_right": { "skinColor": 14079702, "side": 1, "opacity": 1, "imgurl": "../../img/images3D/1502887864239_2.jpg" } } }, "showSortNub": 46, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null },
    { "show": true, "uuid": "", "name": "door_case2", "objType": "cube2", "length": 15, "width": 15, "height": 190, "x": 612.609, "y": 100, "z": -754.724, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 14540253, "side": 1, "opacity": 1 }, "skin_down": { "skinColor": 14079702, "side": 1, "opacity": 1 }, "skin_fore": { "skinColor": 14079702, "side": 1, "opacity": 1, "imgurl": "../../img/images3D/1502887864239_2.jpg" }, "skin_behind": { "skinColor": 14079702, "side": 1, "opacity": 1, "imgurl": "../../img/images3D/1502887864239_2.jpg" }, "skin_left": { "skinColor": 14079702, "side": 1, "opacity": 1, "imgurl": "../../img/images3D/1502887864239_2.jpg" }, "skin_right": { "skinColor": 14079702, "side": 1, "opacity": 1, "imgurl": "../../img/images3D/1502887864239_2.jpg" } } }, "showSortNub": 46, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null },
    { "show": true, "uuid": "", "name": "door_case3", "objType": "cube2", "length": 240, "width": 15, "height": 5, "x": 500, "y": 197.5, "z": -754.724, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 14540253, "side": 1, "opacity": 1 }, "skin_down": { "skinColor": 14079702, "side": 1, "opacity": 1 }, "skin_fore": { "skinColor": 14079702, "side": 1, "opacity": 1, "imgurl": "../../img/images3D/1502887864239_2.jpg" }, "skin_behind": { "skinColor": 14079702, "side": 1, "opacity": 1, "imgurl": "../../img/images3D/1502887864239_2.jpg" }, "skin_left": { "skinColor": 14079702, "side": 1, "opacity": 1, "imgurl": "../../img/images3D/1502887864239_2.jpg" }, "skin_right": { "skinColor": 14079702, "side": 1, "opacity": 1, "imgurl": "../../img/images3D/1502887864239_2.jpg" } } }, "showSortNub": 46, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }
    ,
    { "show": true, "castShadow": false, "name": "doorRight_45", "actionSign": "doorRight", "uuid": "", "objType": "cube", "width": 4, "height": 190, "length": 104, "x": 448, "y": 100, "z": -755, "style": { "skinColor": 9095650, "skin": { "skin_up": { "skinColor": 5325886, "side": 1, "opacity": 1 }, "skin_down": { "skinColor": 5325886, "side": 1, "opacity": 1 }, "skin_fore": { "skinColor": 5325886, "side": 1, "opacity": 1 }, "skin_behind": { "skinColor": 5325886, "side": 1, "opacity": 1 }, "skin_left": { "skinColor": 5325886, "side": 1, "opacity": 1, "imgurl": "../../img/3dImg/door_right.png" }, "skin_right": { "skinColor": 5325886, "side": 1, "opacity": 1, "imgurl": "../../img/3dImg/door_left.png" } } }, "dbclickEvents": { "obj_eventParamInfo": [{ "name": "", "remark": "" }], "obj_event": "openRightDoor(runobj,function(){});" }, "showSortNub": 45, "customType1": "", "customType2": "", "animation": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null },
    { "show": true, "uuid": "", "name": "door_case6", "objType": "cube2", "length": 240, "width": 15, "height": 5, "x": -500, "y": 197.5, "z": -754.724, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 14540253, "side": 1, "opacity": 1 }, "skin_down": { "skinColor": 14079702, "side": 1, "opacity": 1 }, "skin_fore": { "skinColor": 14079702, "side": 1, "opacity": 1, "imgurl": "../../img/images3D/1502887864239_2.jpg" }, "skin_behind": { "skinColor": 14079702, "side": 1, "opacity": 1, "imgurl": "../../img/images3D/1502887864239_2.jpg" }, "skin_left": { "skinColor": 14079702, "side": 1, "opacity": 1, "imgurl": "../../img/images3D/1502887864239_2.jpg" }, "skin_right": { "skinColor": 14079702, "side": 1, "opacity": 1, "imgurl": "../../img/images3D/1502887864239_2.jpg" } } }, "showSortNub": 46, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null },
    { "show": true, "uuid": "", "name": "door_case4", "objType": "cube2", "length": 15, "width": 15, "height": 190, "x": -388.523, "y": 100, "z": -754.724, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 14540253, "side": 1, "opacity": 1 }, "skin_down": { "skinColor": 14079702, "side": 1, "opacity": 1 }, "skin_fore": { "skinColor": 14079702, "side": 1, "opacity": 1, "imgurl": "../../img/images3D/1502887864239_2.jpg" }, "skin_behind": { "skinColor": 14079702, "side": 1, "opacity": 1, "imgurl": "../../img/images3D/1502887864239_2.jpg" }, "skin_left": { "skinColor": 14079702, "side": 1, "opacity": 1, "imgurl": "../../img/images3D/1502887864239_2.jpg" }, "skin_right": { "skinColor": 14079702, "side": 1, "opacity": 1, "imgurl": "../../img/images3D/1502887864239_2.jpg" } } }, "showSortNub": 46, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null },
    { "show": true, "uuid": "", "name": "door_case5", "objType": "cube2", "length": 15, "width": 15, "height": 190, "x": -612.609, "y": 100, "z": -754.724, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 14540253, "side": 1, "opacity": 1 }, "skin_down": { "skinColor": 14079702, "side": 1, "opacity": 1 }, "skin_fore": { "skinColor": 14079702, "side": 1, "opacity": 1, "imgurl": "../../img/images3D/1502887864239_2.jpg" }, "skin_behind": { "skinColor": 14079702, "side": 1, "opacity": 1, "imgurl": "../../img/images3D/1502887864239_2.jpg" }, "skin_left": { "skinColor": 14079702, "side": 1, "opacity": 1, "imgurl": "../../img/images3D/1502887864239_2.jpg" }, "skin_right": { "skinColor": 14079702, "side": 1, "opacity": 1, "imgurl": "../../img/images3D/1502887864239_2.jpg" } } }, "showSortNub": 46, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null },
    { "show": true, "castShadow": false, "name": "doorRight_1", "actionSign": "doorRight", "uuid": "", "objType": "cube", "width": 4, "height": 190, "length": 104, "x": -553, "y": 100, "z": -755, "style": { "skinColor": 9095650, "skin": { "skin_up": { "skinColor": 5325886, "side": 1, "opacity": 1 }, "skin_down": { "skinColor": 5325886, "side": 1, "opacity": 1 }, "skin_fore": { "skinColor": 5325886, "side": 1, "opacity": 1 }, "skin_behind": { "skinColor": 5325886, "side": 1, "opacity": 1 }, "skin_left": { "skinColor": 5325886, "side": 1, "opacity": 1, "imgurl": "../../img/3dImg/door_right.png" }, "skin_right": { "skinColor": 5325886, "side": 1, "opacity": 1, "imgurl": "../../img/3dImg/door_left.png" } } }, "dbclickEvents": { "obj_eventParamInfo": [{ "name": "", "remark": "" }], "obj_event": "openRightDoor(runobj,function(){});" }, "showSortNub": 45, "customType1": "", "customType2": "", "animation": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null },
    { "show": true, "name": "doorLeft_2", "uuid": "", "actionSign": "doorLeft", "objType": "cube", "castShadow": false, "width": 4, "height": 190, "length": 104, "x": -448, "y": 100, "z": -755, "style": { "skinColor": 9095650, "skin": { "skin_up": { "skinColor": 5325886, "side": 1, "opacity": 1 }, "skin_down": { "skinColor": 5325886, "side": 1, "opacity": 1 }, "skin_fore": { "skinColor": 5325886, "side": 1, "opacity": 1 }, "skin_behind": { "skinColor": 5325886, "side": 1, "opacity": 1 }, "skin_left": { "skinColor": 5325886, "side": 1, "opacity": 1, "imgurl": "../../img/3dImg/door_left.png" }, "skin_right": { "skinColor": 5325886, "side": 1, "opacity": 1, "imgurl": "../../img/3dImg/door_right.png" } } }, "dbclickEvents": { "obj_eventParamInfo": [{ "name": "", "remark": "" }], "obj_event": "openLeftDoor(runobj,function(){});" }, "showSortNub": 44, "customType1": "", "customType2": "", "animation": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }

技術分享圖片技術分享圖片

b、搭建貨架 貨物等等

基礎場景已經搭建好了 下面就是搭建貨架了

for(var i=1;i<=36;i++){
    Aobjects.push({
        "show": true, "uuid": "", "name": "shelf_" + i + "_1", "objType": "GroupObj",
        "scale": { "x": 1.5, "y": 1, "z": 1.2 },
        "position": { "x": 595 + 90 * i, "y": -95, "z": 140  + 40 * i }, "showSortNub": 54,

    });

    Aobjects.push({
        "show": true, "uuid": "", "name": "shelf_" + i , "objType": "GroupObj",
        "scale": { "x": 1.5, "y": 1, "z": 1.2 },
        "position": { "x": 595 + 90 * i, "y": -95, "z": 140 }, "showSortNub": 54,

    })
}

技術分享圖片

添加36個貨架之後，整個場景的幀率變成了14幀 這樣的體驗效果是非常不好的

所以需要調用優化算法 將場景總物體的畫布算法進行優化 

//優化算法
tlcore3DObj.commonFunc.MergeOptimizationByNames([
‘cM_shelf_1‘,‘cM_shelf_1_1‘,‘cM_shelf_2‘,‘cM_shelf_2_1‘,
‘cM_shelf_3‘,‘cM_shelf_3_1‘,‘cM_shelf_4‘,‘cM_shelf_4_1‘,
‘cM_shelf_5‘,‘cM_shelf_5_1‘,‘cM_shelf_6‘,‘cM_shelf_6_1‘,
‘cM_shelf_7‘,‘cM_shelf_7_1‘,‘cM_shelf_8‘,‘cM_shelf_8_1‘,
‘cM_shelf_9‘,‘cM_shelf_9_1‘,‘cM_shelf_10‘,‘cM_shelf_10_1‘,
‘cM_shelf_11‘,‘cM_shelf_11_1‘,‘cM_shelf_12‘,‘cM_shelf_12_1‘,
‘cM_shelf_13‘,‘cM_shelf_13_1‘,‘cM_shelf_14‘,‘cM_shelf_14_1‘,
‘cM_shelf_15‘,‘cM_shelf_15_1‘,‘cM_shelf_16‘,‘cM_shelf_16_1‘,
‘cM_shelf_17‘,‘cM_shelf_17_1‘,‘cM_shelf_18‘,‘cM_shelf_18_1‘]);

最後得到結果是場景幀率又回到了60幀

技術分享圖片

好了 ，第一課先講到這裏吧

下集預告：

　　第二課我們將詳細講解如何添加貨物，貨架容量管理、以及動態操作貨物上下架 、廠房的溫濕度 空調 通風 防火 消防定位等操作

　　通過可視化操作 直接控制廠房中各種具體設備

技術交流咨詢郵箱：[email protected]

歡迎夥伴們一起探討交流。

如何用webgl(three.js)搭建一個3D庫房-第一課

相關推薦

如何用webgl(three.js)搭建一個3D庫房-第一課

com ima gn3 cool otto ttl 百度 core 4.6 今天我們來討論一下如何使用當前流行的WebGL技術搭建一個庫房並且實現實時有效交互 第一步、搭建一個3D庫房首先你得知道庫房長啥樣，我們先來瞅瞅庫房長啥樣（這是我在網上找的一個庫房圖片，百度了“庫房

使用webgl(three.js)搭建一個3D建築，3D消防模擬，web版3D,bim管理系統——第四課

function getBuildFloorData() { var models = [{ "show": true, "uuid": "", "name": "m4_dtWall_1", "objType": "cube2", "length": 1000, "width": 200, "hei

使用webgl(three.js)搭建一個3D智慧園區、3D建築，3D消防模擬，web版3D,bim管理系統——第四課（炫酷版一）

這節課我們主要講解園區三維視覺化炫酷感官技術方案 前言： 　　當基礎技術達到普及狀態，應用就趨向於極致，在三維視覺化領域也是這個道理。各大視覺化公司都追求美觀最大化，這時候美工的作用就不容忽視了。 　　背景說明： 　　　　A、經濟背景：經濟下行的大環境下，各大有社會責任的企業與部門開始拉動內需，擴大預

用node.js搭建一個靜態資源站 html,js,css正確加載 跳轉也完美實現！

都在 加載 簡單 pipe tps color exec create 包含 昨天剛買了一個服務器想著用來測試一些自己的項目，由於是第一次建站，在tomcat,linux,node.js間想了好久最終因為node搭建比較方便沒那麽麻煩就決定用node.js來搭建網站項目。

用Vue.js搭建一個小說閱讀網站

1.簡介 這是一個使用vue.js + mint-ui + .net core api的小說網站。 最近在學習vue.js，而拋開實踐的學習都是在裝逼，所以結合實際，準備做一個小說網站，這樣麻麻再也不用擔心我在看小說時被不良資訊侵擾了哈哈。 首先說明一下，小說資料來源於網路搜尋，並不直接儲存於自己的伺服

使用WebGL + Three.js制作動畫場景

http hang log orm monitor 放置 tor mes quest 使用WebGL + Three.js制作動畫場景 3D圖像，技術，打造產品，還有互聯網：這些只是我愛好的一小部分。 現在，感謝WebGL的出現－一個新的JavaScriptAPI，它可以

用sublime text 3 搭建一個編譯java的環境

... 環境 將他 def .com echo 獲取 java安裝 原來 有的時候，你在學習或者看書的時候，想驗證一下書中的一段小程序或者自己想寫個簡單的java程序，又不願意打開像eclipse這種IDE，你如果安裝了sublime text，配置一下java的編譯環

使用three.js搭建室內場景

公司做商城、消防、用電等專案，需要實現樓層和裝置的視覺化，以前都是使用其他建模工具建立的整體模型，再使用three.js的載入器載入到場景中，但是這樣的載入存在缺陷，比如不能給模型的元素賦屬性、不能單個點選元素、渲染單調等。所以本次參考了一些資料，不使用模型倒入，完全使用th

用vue-cli來搭建一個vue專案

用控制檯生成vue專案 在控制檯中輸入vue init webpack project(自己取的專案名稱) “project1”是自己取的專案名稱 下面的： “Project name”寫專案的名稱，不可以出現大寫字母否則會報錯 "Project descri

用虛擬機器簡單搭建一個hadoop叢集（Linux）

一，前提 1. 安裝好一臺Linux的虛擬機器（我用的純粹的黑框框） 2.  修改好IP地址並安裝jdk  (我這裡安裝的是1.8版本的)  vi /etc/sysconfig/network-scripts/ifcfg-eth0 重啟網路生效     s

用深度學習網路搭建一個聊天機器人(二)

誰/為什麼關注基於檢索模型的機器人？ 在本系列的上一篇部落格中說到，基於檢索模型的機器人有一個的回答集（repository），包含了預先定義的若干回答。與該模型相對應的產生式模型則是在不借助任何回答集的情況下產生一個全新的回答。 讓我們更正式地定義基於檢索模型的機器人：模型的輸入為上下文（context）

使用node.js搭建一個簡單的本地伺服器

//否則,瀏覽器不能正確識別資源,不能根據content-type,做出正確的處理 //使用node.js寫一個簡單的本地伺服器 var http = require('http'); var fs = require('fs');//引入檔案讀取模組 var documentRoot = 'E:/work/

【node.js】使用node.js搭建一個本地web伺服器

操作步驟 1、到node官網（https://nodejs.org/en/）下載node.js安裝檔案，X64代表執行環境為windows64位 2、雙擊安裝檔案安裝node.js 3、等待安裝 4、測試是否安裝成功，按【windows+R】，執行cmd 5、輸入n

使用 Vue2.js Node.js 搭建一個小型的全棧專案

寫在前面 由於最近公司業務不是很忙，空閒時間比較多，於是就在糾結Vue.js（之前就學習過）和Node.js先專研哪個比較好，最終選擇了先玩玩Node.js。經過一段時間的學習，就有了教程 Node+Koa2+Mysql 搭建簡易部落格 GitHub地址，想

用Eclipse和wxpython搭建一個Python Gui程式開發環境

從今天凌晨2點到現在。花了幾乎20個小時的時間去研究py Gui程式的基本規則，然後為了用py2exe給程式打包，差點沒瘋掉。在此總結一下經驗。 1.py2exe的版本一定要和python的版本完全匹配，才能保證打包的順利進行。 2.用eclipse和wxpython搭建整合環境時應注意Path環境

three.js-畫一個點/粒子

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Three框架</title>

WebGL three.js學習筆記 自定義頂點建立幾何體

auto getchild clear wid charset dem idt process 初始 自定義頂點建立幾何體與克隆 Three.js本身已經有很多的網格模型，基本已經夠我們的使用，但是如果我們還是想自己根據頂點坐標來建立幾何模型的話，Three.js也是可以的

WebGL three.js學習筆記 使用粒子系統模擬時空隧道（蟲洞）

藍色 raw mat charset rgb out title ble 以及 WebGL three.js學習筆記 使用粒子系統模擬時空隧道 本例的運行結果如圖： 時空隧道demo演示 Demo地址：https://nsytsqdtn.github.io/demo/36

WebGL three.js學習筆記 載入外部模型以及Tween.js動畫

WebGL three.js學習筆記 載入外部模型以及Tween.js動畫 本文的程式實現了載入外部stl格式的模型，以及學習瞭如何把載入的模型變為一個粒子系統，並使用Tween.js對該粒子系統進行動畫設定 模型動畫demo演示(網頁載入速度可能會比較慢) demo地址：https://nsytsqdtn.

WebGL three.js學習筆記 6種類型的紋理介紹及應用

透視投影 qdt 高度 我們 幾何 區別 set 亮度 cubemap WebGL three.js學習筆記 6種類型的紋理介紹及應用 本文所使用到的demo演示： 高光貼圖Demo演示 反光效果Demo演示（因為是加載的模型，所以速度會慢） （一）普通紋理 計算機圖形學中