這節(jié)課我們主要講解園區(qū)三維可視化炫酷感官技術(shù)方案

前言：

　　當(dāng)基礎(chǔ)技術(shù)達(dá)到普及狀態(tài)，應(yīng)用就趨向于極致，在三維可視化領(lǐng)域也是這個(gè)道理。各大可視化公司都追求美觀最大化，這時(shí)候美工的作用就不容忽視了。

　　背景說(shuō)明：

　　　　A、經(jīng)濟(jì)背景：經(jīng)濟(jì)下行的大環(huán)境下，各大有社會(huì)責(zé)任的企業(yè)與部門(mén)開(kāi)始拉動(dòng)內(nèi)需，擴(kuò)大預(yù)算，向有技術(shù)有情懷的科技公司派送訂單，保證科技公司活下來(lái)，下一個(gè)科技風(fēng)口能夠繼續(xù)戰(zhàn)斗，國(guó)民經(jīng)濟(jì)能夠挺住下行壓力。所以可視化，科技風(fēng)，炫酷風(fēng)成為擴(kuò)大預(yù)算的一項(xiàng)重要指標(biāo)。（有錢(qián)）

　　　　B、技術(shù)背景：三維技術(shù)很早在游戲方面就有應(yīng)用，但是局限于客戶端龐大，電腦硬件要求高，所以在行業(yè)應(yīng)用方面一直沒(méi)有普及，而當(dāng)前民眾用的電腦基本都帶有獨(dú)立顯卡，包括市面上的手機(jī)也基本都帶有GPU處理器，這為三維技術(shù)普及與應(yīng)用奠定了很好的基石。還有就是webgl技術(shù)的發(fā)明與普及，瀏覽器直接支持gpu加速，輕客戶端機(jī)制把一切封裝在瀏覽器沙盒中。用戶只需要解決業(yè)務(wù)相關(guān)的問(wèn)題就可以。（有技術(shù)方案）

　　　　C、項(xiàng)目背景：與本項(xiàng)目相關(guān)的背景就是各大可視化廠家發(fā)力做出越來(lái)越炫酷的效果，作為webgl愛(ài)好者，不能放過(guò)一切前沿的技術(shù)應(yīng)用。著手研究與實(shí)施出炫酷效果，對(duì)于個(gè)人而言也是刻不容緩。（有人）

　　　　D、錢(qián)、技術(shù)、人都有了，just do it！！！

?

一、閑話少敘，先看效果圖

1、外立面效果圖加周遭環(huán)境特效。

?

2、單獨(dú)樓層效果與過(guò)度動(dòng)畫(huà)

3、室內(nèi)效果

二、難點(diǎn)重點(diǎn)說(shuō)明

炫酷的效果最終在于技術(shù)的熟練應(yīng)用與設(shè)計(jì)師的強(qiáng)大腦洞

這里再次強(qiáng)調(diào)美工不可忽視的作用，尊稱設(shè)計(jì)師。

效果好壞以及工作量的多少全憑設(shè)計(jì)師前期的工作，專業(yè)的人干專業(yè)的事情，大部分程序猿沒(méi)有審美能力，這時(shí)候就靠設(shè)計(jì)師想象出炸天的效果。程序猿這時(shí)候利用自己的知識(shí)能力實(shí)現(xiàn)設(shè)計(jì)師的設(shè)想。

至于難點(diǎn)技術(shù)有粒子效果、著色器語(yǔ)言、線性代數(shù)與圖片的靈活應(yīng)用、瓦片化加載等。

三、完成步驟

園區(qū)可視化方案的實(shí)施跟真實(shí)建筑樓宇的過(guò)程是一樣的。從設(shè)計(jì)到地基到建筑，一步也不能少。一步也不能跳過(guò)

1、先設(shè)計(jì)模型

　　1.1、先設(shè)計(jì)，這里設(shè)計(jì)師登場(chǎng)，首先設(shè)計(jì)師打開(kāi)腦洞，想象出一款炫酷的設(shè)計(jì)，與風(fēng)格方案，然后與程序猿交涉，輸出程序猿需要的原圖。

　　1.2、開(kāi)始“打地基”，根據(jù)設(shè)計(jì)師的設(shè)計(jì)，我們選的地基是科技虛幻話地基，就是科技網(wǎng)格

　　　　效果：

?

{"show":true,"uuid":"","name":"b1_back_1","objType":"cube2","length":40000,"width":40000,"height":1,"x":0,"y":0,"z":0,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":16777215,"side":1,"opacity":0.4,"imgurl":"../../img/3dImg/bg2.png","repeatx":true,"width":5,"repeaty":true,"height":5},"skin_down":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bg2.png"},"skin_fore":{"skinColor":16777215,"side":1,"opacity":1},"skin_behind":{"skinColor":16777215,"side":1,"opacity":1},"skin_left":{"skinColor":16777215,"side":1,"opacity":1},"skin_right":{"skinColor":16777215,"side":1,"opacity":1}}},"showSortNub":1,"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":0.1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null}

　技術(shù)點(diǎn)講解：

　　　　這里面有兩種方案，1、用劃線的方式畫(huà)出網(wǎng)格，2、做一張網(wǎng)格透明圖片作為網(wǎng)格。我建議使用第一種方案，具體優(yōu)點(diǎn)我們后續(xù)再講。

　　1.3、實(shí)現(xiàn)周遭環(huán)境

　　效果：

　　代碼：

{"show":true,"uuid":"","name":"b1_back_2","objType":"cube2","length":6000,"width":3000,"height":1,"x":0,"y":10,"z":0,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bak6.png"},"skin_down":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bak6.png"},"skin_fore":{"skinColor":16777215,"side":1,"opacity":0},"skin_behind":{"skinColor":16777215,"side":1,"opacity":0},"skin_left":{"skinColor":16777215,"side":1,"opacity":0},"skin_right":{"skinColor":16777215,"side":1,"opacity":0}}},"showSortNub":1,"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":0.1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null}

?

　難點(diǎn)講解：這里面主要涉及到虛化處理，uv處理時(shí)計(jì)算位置、在合適的位置將透明值設(shè)置為0

?1.4、添加道路特效

　　效果：

?

　　代碼：

{"show":true,"uuid":"","name":"b1_road_2","objType":"flowTube","points":[{"x":0,"y":0,"z":0},{"x":-900,"y":0,"z":2300},{"x":-980,"y":0,"z":2600},{"x":-1050,"y":0,"z":3000},{"x":-1150,"y":0,"z":3225},{"x":-1350,"y":0,"z":3400},{"x":-1500,"y":0,"z":3430},{"x":-3000,"y":0,"z":3280},{"x":-3800,"y":0,"z":3300},{"x":-4700,"y":0,"z":3400},{"x":-7000,"y":0,"z":3850}],"position":{"x":2855.78,"y":20,"z":-2705.822},"scale":{"x":1,"y":0.1,"z":1},"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"style":{"skinColor":16772846,"imgurl":"../../img/3dImg/right1.png","opacity":1,"canvasSkin":{"cwidth":1024,"cheight":128,"cwNub":4,"chNub":4,"cMarginW":0.2,"cMarginH":0.2,"speed":20,"fps":40,"direction":"w","forward":"f","side":2,"run":true,"bgcolor":"rgba(199, 103, 0, 0.6)"}},"segments":10,"radialSegments":4,"closed":false,"radius":20,"showSortNub":7,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null}

　　難點(diǎn)：如何讓道路動(dòng)起來(lái)，這里我封裝了方法，具體如何封裝由于篇幅原因，只能下節(jié)課詳解，這節(jié)課主要講宏觀搭建。

　　1.5、添加樓層

　　效果：

　　模型代碼：

{"show":true,"uuid":"","name":"b1_floor_2","objType"skinColor":16777215,"skin":{"skin_up":{"skinColor":1411309,"side":1,"opacity":1},"skin_down":{"skinColor":1411309,"side":1,"opacity":1},"skin_fore":{"skinColor":1411309,"side":1,"opacity":1},"skin_behind":{"skinColor":1411309,"side":1,"opacity":1},"skin_left":{"skinColor":1411309,"side":1,"opacity":1},"skin_right":{"skinColor":1411309,"side":1,"opacity":1}}},"showSortNub":23,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0.013962634015954637},{"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":"b1_floor_2OBJCREN81","objType":"cube2","length":20,"width":5,"height":100,"x":352.402,"y":124.455,"z":-920.173,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":1411309,"side":1,"opacity":1},"skin_down":{"skinColor":1411309,"side":1,"opacity":1},"skin_fore":{"skinColor":1411309,"side":1,"opacity":1},"skin_behind":{"skinColor":1411309,"side":1,"opacity":1},"skin_left":{"skinColor":1411309,"side":1,"opacity":1},"skin_right":{"skinColor":1411309,"side":1,"opacity":1}}},"showSortNub":23,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0.013962634015954637},{"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":"b1_floor_2OBJCREN82","objType":"cube2","length":20,"width":5,"height":100,"x":456.197,"y":124.455,"z":-921.622,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":1411309,"side":1,"opacity":1},"skin_down":{"skinColor":1411309,"side":1,"opacity":1},"skin_fore":{"skinColor":1411309,"side":1,"opacity":1},"skin_behind":{"skinColor":1411309,"side":1,"opacity":1},"skin_left":{"skinColor":1411309,"side":1,"opacity":1},"skin_right":{"skinColor":1411309,"side":1,"opacity":1}}},"showSortNub":23,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0.013962634015954637},{"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":"b1_floor_2OBJCREN83","objType":"cube2","length":20,"width":5,"height":100,"x":558.428,"y":124.455,"z":-923.05,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":1411309,"side":1,"opacity":1},"skin_down":{"skinColor":1411309,"side":1,"opacity":1},"skin_fore":{"skinColor":1411309,"side":1,"opacity":1},"skin_behind":{"skinColor":1411309,"side":1,"opacity":1},"skin_left":{"skinColor":1411309,"side":1,"opacity":1},"skin_right":{"skinColor":1411309,"side":1,"opacity":1}}},"showSortNub":23,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0.013962634015954637},{"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":"b1_floor_2OBJCREN84","objType":"cube2","length":60,"width":5,"height":100,"x":-1083.881,"y":124.455,"z":310.91,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":1411309,"side":1,"opacity":1},"skin_down":{"skinColor":1411309,"side":1,"opacity":1},"skin_fore":{"skinColor":1411309,"side":1,"opacity":1},"skin_behind":{"skinColor":1411309,"side":1,"opacity":1},"skin_left":{"skinColor":1411309,"side":1,"opacity":1},"skin_right":{"skinColor":1411309,"side":1,"opacity":1}}},"showSortNub":23,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":-3.141592653589793},{"direction":"y","degree":1.5411257295109928},{"direction":"z","degree":-3.141592653589793}],"thick":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"b1_floor_2OBJCREN85","objType":"cube2","length":20,"width":5,"height":100,"x":-575.755,"y":124.455,"z":-908.398,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":1411309,"side":1,"opacity":1},"skin_down":{"skinColor":1411309,"side":1,"opacity":1},"skin_fore":{"skinColor":1411309,"side":1,"opacity":1},"skin_behind":{"skinColor":1411309,"side":1,"opacity":1},"skin_left":{"skinColor":1411309,"side":1,"opacity":1},"skin_right":{"skinColor":1411309,"side":1,"opacity":1}}},"showSortNub":23,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0.013962634015954637},{"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":"b1_floor_2OBJCREN86","objType":"cube2","length":20,"width":5,"height":100,"x":-674.435,"y":124.455,"z":-905.836,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":1411309,"side":1,"opacity":1},"skin_down":{"skinColor":1411309,"side":1,"opacity":1},"skin_fore":{"skinColor":1411309,"side":1,"opacity":1},"skin_behind":{"skinColor":1411309,"side":1,"opacity":1},"skin_left":{"skinColor":1411309,"side":1,"opacity":1},"skin_right":{"skinColor":1411309,"side":1,"opacity":1}}},"showSortNub":23,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0.013962634015954637},{"direction":"z","degree":0}],"thick":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null}],"showSortNub":1051,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null}

?

?

　　技術(shù)難點(diǎn)：瓦片式加載，初步加載時(shí)只做外立面的加載與渲染，當(dāng)點(diǎn)擊時(shí)再做內(nèi)部加載

　　1.6、剩下部分全是樓層的疊加 這里不做累訴

　　最終達(dá)到如下效果即可

　　1.7、瓦片是加載房間模型

　　效果如下：　　

　　代碼如下：

[{"show":true,"uuid":"","name":"be2":"","animation":null,"dbclickEvents":null,"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":"10001","BindMeteName":""}],"showSortNub":10000,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"b3_pz_4","objType":"GroupObj","scale":{"x":0.2,"y":0.2,"z":0.2},"position":{"x":-1678.254,"y":-2.85,"z":-758.935},"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"childrens":[{"name":"b3_pz_4OBJCREN0","objType":"cylinder","radiusTop":200,"radiusBottom":100,"height":800,"segmentsX":2,"segmentsY":0,"openEnded":false,"position":{"x":0,"y":715.352,"z":0},"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":0,"opacity":1},"skin_down":{"skinColor":16777215,"side":1,"opacity":1},"skin_side":{"skinColor":16777215,"side":2,"opacity":1,"imgurl":"../../img/3dImg/flower.gif"}}},"showSortNub":40000,"show":true,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":"10001","BindMeteName":""},{"name":"b3_pz_4OBJCREN1","objType":"cylinder","radiusTop":200,"radiusBottom":100,"height":800,"segmentsX":2,"segmentsY":0,"openEnded":false,"position":{"x":0,"y":715.352,"z":0},"scale":{"x":1,"y":1,"z":1},"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":1.0471975201093497},{"direction":"z","degree":0}],"style":{"skinColor":16776960,"skin":{"skin_up":{"skinColor":16777215,"side":0,"opacity":1},"skin_down":{"skinColor":16777215,"side":1,"opacity":1},"skin_side":{"skinColor":16777215,"side":2,"opacity":1,"imgurl":"../../img/3dImg/flower.gif"}}},"showSortNub":40000,"show":true,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":"10001","BindMeteName":""},{"name":"b3_pz_4OBJCREN2","objType":"cylinder","radiusTop":200,"radiusBottom":100,"height":800,"segmentsX":2,"segmentsY":0,"openEnded":false,"position":{"x":0,"y":715.352,"z":0},"scale":{"x":1,"y":1,"z":1},"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":2.0943951023931953},{"direction":"z","degree":0}],"style":{"skinColor":16776960,"skin":{"skin_up":{"skinColor":16777215,"side":0,"opacity":1},"skin_down":{"skinColor":16777215,"side":1,"opacity":1},"skin_side":{"skinColor":16777215,"side":2,"opacity":1,"imgurl":"../../img/3dImg/flower.gif"}}},"showSortNub":40000,"show":true,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":"10001","BindMeteName":""},{"name":"b3_pz_4OBJCREN3","objType":"cylinder","radiusTop":150,"radiusBottom":100,"height":400,"segmentsX":12,"segmentsY":0,"openEnded":false,"position":{"x":0,"y":200,"z":0},"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":0,"opacity":1,"imgurl":"../../img/3dImg/wall/nitu.jpg"},"skin_down":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/rack_inside.jpg"},"skin_side":{"skinColor":7027752,"side":2,"opacity":1,"imgurl":"../../img/3dImg/pump_metalreflect.jpg"}}},"showSortNub":10000,"show":true,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":"10001","BindMeteName":""},{"name":"b3_pz_4OBJCREN4","objType":"cylinder","radiusTop":146,"radiusBottom":100,"height":1,"segmentsX":12,"segmentsY":0,"openEnded":false,"position":{"x":0,"y":367.315,"z":0},"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":3351586,"side":2,"opacity":1,"imgurl":"../../img/3dImg/wall/nitu.jpg","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_down":{"skinColor":16777215,"side":2,"opacity":1},"skin_side":{"skinColor":7027752,"side":2,"opacity":1}}},"showSortNub":10000,"show":true,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":"10001","BindMeteName":""}],"showSortNub":10000,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"b3_glasswall_1","objType":"cube2","length":10,"width":450,"height":300,"x":181.738,"y":150,"z":-457.712,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/rack_inside.jpg"},"skin_down":{"skinColor":16777215,"side":1,"opacity":1},"skin_fore":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/wall/glass-wall5.png","repeatx":true,"width":2,"repeaty":true,"height":1},"skin_behind":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/wall/glass-wall5.png","repeatx":true,"width":2,"repeaty":true,"height":1},"skin_left":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/wall/glass-wall5.png"},"skin_right":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/wall/glass-wall5.png"}}},"showSortNub":70000,"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":"b3_glasswall_6","objType":"cube2","length":10,"width":260,"height":300,"x":-1726.631,"y":150,"z":-679.828,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/rack_inside.jpg"},"skin_down":{"skinColor":16777215,"side":1,"opacity":1},"skin_fore":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/wall/glass-wall5.png","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_behind":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/wall/glass-wall5.png","repeatx":true,"width":1,"repeaty":true,"height":1},"skin_left":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/wall/glass-wall5.png"},"skin_right":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/wall/glass-wall5.png"}}},"showSortNub":90000,"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}]

2、業(yè)務(wù)邏輯

　　2.1、場(chǎng)景設(shè)想

　　　　我們?cè)O(shè)想場(chǎng)景是這樣的 初始化時(shí)看到整個(gè)園區(qū)樓宇的概況，然后雙擊樓宇，加載單個(gè)樓層模型，再雙擊樓層、加載樓層內(nèi)房間模型、雙擊房間、可以進(jìn)入。

　　2.2、代碼實(shí)現(xiàn)

function ModelBussiness() {this.currentAnimationState = 0; } ModelBussiness.prototype.init = function (roomName) {WT3DObj.mouseOverCallBack = this.mouseOverCallBack;//進(jìn)入回調(diào)WT3DObj.mouseOverInCallBack = this.mouseOverInCallBack;//離開(kāi)回調(diào)WT3DObj.mouseOverLeaveCallBack = this.mouseOverLeaveCallBack;//懸停觸發(fā)時(shí)間長(zhǎng)度WT3DObj.mouseOverTimeLong = 1000;}//單擊選中 ModelBussiness.prototype.clickSelectCabinet = function (_obj, _face) { } ModelBussiness.prototype.currentShowCabinet = null; ModelBussiness.prototype.currentState = 0;//雙擊選中 ModelBussiness.prototype.dbClickSelectCabinet = function (_obj, _face) {if (!_obj.visible) {return;}if (_obj.name.indexOf("cube2_612") >= 0) {modelBussiness.clickBuildAnimation();} else if (_obj.name.indexOf("b1_floor_") >= 0) {//顯示樓層modelBussiness.clickFloorAnimation(_obj);} else if (_obj.name.indexOf("floor_room_zt") >= 0) {//顯示樓層modelBussiness.clickRoomAnimation(_obj);} else if (_obj.name.indexOf("b3_tv_2") >= 0 || _obj.name.indexOf("messagePanel_2") >= 0) {modelBussiness.resetBuild();}//雙擊攝像機(jī)else if (_obj.name.indexOf("camera") >= 0) {modelBussiness.playVideo("ws://220.231.250.181:10080/streamv2/live.flv?ip=10.82.31.193&port=5001&profile=h264major&channel=007ea8e5b1884dc6904ba0098ed1b569");} }//懸停 ModelBussiness.prototype.mouseOverCallBack = function (_obj, face) { } ModelBussiness.prototype.mouseInCurrentObj = null; ModelBussiness.prototype.lastMouseInCurrentObj = null; ModelBussiness.prototype.mouseOverInCallBack = function (_obj, face) {var _this = this;var color = 0xbfffea;console.log(_obj.name);modelBussiness.lastMouseInCurrentObj = _obj;modelBussiness.mouseInCurrentObj = _obj;if (_obj.name.indexOf("b1_floor_") >= 0 || _obj.name.indexOf("floor_room_") >= 0) {var _sobj = _obj;if (_obj.name.indexOf("OBJCREN") > 0) {_sobj = _obj.parent;}modelBussiness.mouseInCurrentObj = _sobj;WT3DObj.commonFunc.setSkinColorByObj(_sobj, 0x00ffff);} else if (_obj.name.indexOf("b3_tv_2") >= 0) {layer.msg("雙擊該電視返回園區(qū)總覽");} else if (_obj.name.indexOf("messagePanel_2") >= 0) {layer.msg("雙擊該信息牌返回園區(qū)總覽");}} ModelBussiness.prototype.mouseOverLeaveCallBack = function (_obj, face, nowobj) {var _this = this;var color = 0x000000;if (_obj.name.indexOf("b1_floor_") >= 0 || _obj.name.indexOf("floor_room_") >= 0) {var _sobj = _obj;if (_obj.name.indexOf("OBJCREN") > 0) {_sobj = _obj.parent;}WT3DObj.commonFunc.setSkinColorByObj(_sobj, 0x000000);} else if (_obj.name.indexOf("b3_tv_2") >= 0) {layer.closeAll();} else if (_obj.name.indexOf("messagePanel_2") >= 0) {layer.closeAll();}}//雙擊大樓時(shí)動(dòng)畫(huà) ModelBussiness.prototype.outCube = null; ModelBussiness.prototype.clickBuildAnimation=function(){if (!this.outCube) {this.outCube = WT3DObj.commonFunc.findObject("cube2_612");}var c = this.outCube;WT3DObj.commonFunc.changeObjsOpacity([c], 1, 0.01, 600, function () {});new TWEEN.Tween(c.scale).to({x:3,y:3,z:3}, 700).onUpdate(function () {}).onComplete(function () {WT3DObj.commonFunc.changeObjsOpacity([c], 0.01, 1, 10, function () {});c.scale.x = 1; c.scale.y = 1; c.scale.z = 1;c.visible = false;}).start(); } //獲取樓層模型對(duì)象 ModelBussiness.prototype.floors = null; ModelBussiness.prototype.B1Models = null; ModelBussiness.prototype.getFloors = function () {if (!this.floors) {this.floors = {};this.B1Models = [];$.each(WT3DObj.scene.children, function (_index, _obj) {if (_obj.name.indexOf("b1_floor_") == 0) {modelBussiness.floors[_obj.name] = _obj;}if (_obj.name.indexOf("b1") == 0|| _obj.name.indexOf("cube2_612") == 0|| _obj.name.indexOf("messagePanel_1") == 0|| _obj.name.indexOf("messagePanel_2") == 0) {modelBussiness.B1Models.push(_obj);}});}return this.floors; } ModelBussiness.prototype.resetBuild = function () {$.each(modelBussiness.B1Models, function (findex, fobj) {fobj.visible = true;if (fobj.od_position) {{ x: -172.72016085901143, y: 57.386418380824466, z: -75.19850675990654 }, 1000,function () {});this.hidefloorData();this.hideRoomData();layer.closeAll(); } //加載樓層模型 ModelBussiness.prototype.floorModels = {}; ModelBussiness.prototype.loadFloor = function (floorNub, callBack) {if (this.floorModels["f" + floorNub]) {if (callBack) {callBack();if (_obj.name.indexOf("floor_") == 0) {modelBussiness.floorModels["f" + floorNub].push(_obj);}});if (callBack) {callBack();}});}} } ModelBussiness.prototype.hidefloorData = function () {for (var fs in modelBussiness.floorModels) {if (modelBussiness.floorModels[fs]) {var fmodels = modelBussiness.floorModels[fs];$.each(fmodels, function (findex, fobj) {fobj.visible = false;});}}; } //雙擊樓層時(shí)動(dòng)畫(huà) ModelBussiness.prototype.clickFloorAnimation = function (floor) {var _floorNub = parseInt(floor.name.replace("b1_floor_", ""));if (floor.name.indexOf("b1_floor_top") >= 0) {_floorNub = "top";} else {this.loadFloor(_floorNub);}console.log(_floorNub);var _floors = this.getFloors();//b1_floor_top});});});}} ModelBussiness.prototype.distanceApartFloor = function (floorNub,callBack) {var _floors = this.getFloors();var objs = [];for (var i = 1; i <=6; i++) {objs.push(_floors["b1_floor_" + i]);}}).start(); } ModelBussiness.prototype.shrinkageFloor = function (callBack) {var _floors = this.getFloors();var objs = [];}).start(); } //加載房間模型 ModelBussiness.prototype.clickRoomAnimation = function (room) {WT3DObj.commonFunc.flashObjs([room], room.name + "_flashanimation_", 0x00aa00, 10, 200, 0);this.loadRoom(room.name);this.getFloors();} ModelBussiness.prototype.roomModels = {}; ModelBussiness.prototype.currentShowRoomName = "currentShowRoomName"; ModelBussiness.prototype.currentShowroomFlagStr = "currentShowroomFlagStr"; ModelBussiness.prototype.loadRoom = function (roomName, callBack) {var jsonmodels = null;} ModelBussiness.prototype.hideRoomData = function () {}; } //播放攝像頭 ModelBussiness.prototype.playVideo = function (wsSrc) {}var modelBussiness = new ModelBussiness();

?

?

?由于篇幅原因，這一課先介紹到這里?

后面我將繼續(xù)講解用webgl 建立 3D園區(qū) 3D智慧小區(qū) 炫酷效果等等

?

需要交流可郵件：844916072#qq.com

總結(jié)

以上是生活随笔為你收集整理的使用webgl(three.js)搭建一个3D智慧园区、3D建筑，3D消防模拟，web版3D,bim管理系统——第四课（炫酷版一）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。