使用webgl(three.js)搭建一个3D智慧园区、3D建筑，3D消防模拟，web版3D,bim管理系统——第四课（炫酷版一）

这节课我们主要讲解园区三维可视化炫酷感官技术方案

前言：

　　当基础技术达到普及状态，应用就趋向于极致，在三维可视化领域也是这个道理。各大可视化公司都追求美观最大化，这时候美工的作用就不容忽视了。

　　背景说明：

　　　　a、经济背景：经济下行的大环境下，各大有社会责任的企业与部门开始拉动内需，扩大预算，向有技术有情怀的科技公司派送订单，保证科技公司活下来，下一个科技风口能够继续战斗，国民经济能够挺住下行压力。所以可视化，科技风，炫酷风成为扩大预算的一项重要指标。（有钱）

　　　　b、技术背景：三维技术很早在游戏方面就有应用，但是局限于客户端庞大，电脑硬件要求高，所以在行业应用方面一直没有普及，而当前民众用的电脑基本都带有独立显卡，包括市面上的手机也基本都带有gpu处理器，这为三维技术普及与应用奠定了很好的基石。还有就是webgl技术的发明与普及，浏览器直接支持gpu加速，轻客户端机制把一切封装在浏览器沙盒中。用户只需要解决业务相关的问题就可以。（有技术方案）

　　　　c、项目背景：与本项目相关的背景就是各大可视化厂家发力做出越来越炫酷的效果，作为webgl爱好者，不能放过一切前沿的技术应用。着手研究与实施出炫酷效果，对于个人而言也是刻不容缓。（有人）

　　　　d、钱、技术、人都有了，just do it！！！

　　　　技术交流 1203193731@qq.com

一、闲话少叙，先看效果图

1、外立面效果图加周遭环境特效。

2、单独楼层效果与过度动画

3、室内效果

二、难点重点说明

炫酷的效果最终在于技术的熟练应用与设计师的强大脑洞

这里再次强调美工不可忽视的作用，尊称设计师。

效果好坏以及工作量的多少全凭设计师前期的工作，专业的人干专业的事情，大部分程序猿没有审美能力，这时候就靠设计师想象出炸天的效果。程序猿这时候利用自己的知识能力实现设计师的设想。

至于难点技术有粒子效果、着色器语言、线性代数与图片的灵活应用、瓦片化加载等。

三、完成步骤

园区可视化方案的实施跟真实建筑楼宇的过程是一样的。从设计到地基到建筑，一步也不能少。一步也不能跳过

1、先设计模型

　　1.1、先设计，这里设计师登场，首先设计师打开脑洞，想象出一款炫酷的设计，与风格方案，然后与程序猿交涉，输出程序猿需要的原图。

　　1.2、开始“打地基”，根据设计师的设计，我们选的地基是科技虚幻话地基，就是科技网格

　　　　效果：

　　　　代码：

{"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}

　　　　技术点讲解：

　　　　这里面有两种方案，1、用划线的方式画出网格，2、做一张网格透明图片作为网格。我建议使用第一种方案，具体优点我们后续再讲。

　　1.3、实现周遭环境

　　效果：

　　代码：

{"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}

　　难点讲解：这里面主要涉及到虚化处理，uv处理时计算位置、在合适的位置将透明值设置为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)"}},"gments":10,"radialgments":4,"clod":fal,"radius":20,"showsortnub":7,"customtype1":"","customtype2":"","animation":null,"dbclickevents":null,"binddevid":null,"binddevname":null,"devinfo":null,"bindmeteid":null,"bindmetename":null}

　　难点：如何让道路动起来，这里我封装了方法，具体如何封装由于篇幅原因，只能下节课详解，这节课主要讲宏观搭建。

　　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}}},"sh业务培训owsortnub":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}

　　技术难点：瓦片式加载，初步加载时只做外立面的加载与渲染，当点击时再做内部加载

　　1.6、剩下部分全是楼层的叠加 这里不做累诉

　　最终达到如下效果即可

　　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,"gmentsx":2,"gmentsy":0,"openended":fal,"position":{"x":0,"y":715.352,"z":0},"scale":{"x":1,"y":1,"z":1},"rotation":[{"direction":"x","degree":0},{"di卖衣服rection":"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,"gmentsx":2,"gmentsy":0,"openended":fal,"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,"gmentsx":2,"gmentsy":0,"openended":fal,"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,"gmentsx":12,"gmentsy":0,"openended":fal,"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,"gmentsx":12,"gmentsy":0,"openended":fal,"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,"r净水器排行榜epeaty":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、业务逻辑

　　2.1、场景设想

　　　　我们设想场景是这样的 初始化时看到整个园区楼宇的概况，然后双击楼宇，加载单个楼层模型，再双击楼层、加载楼层内房间模型、双击房间、可以进入。

　　2.2、代码实现

function modelbussiness() {    this.currentanimationstate = 0;}modelbussiness.prototype.init = function (roomname) {    wt3dobj.mouovercallback = this.mouovercallback;    //进入回调    wt3dobj.mouoverincallback = this.mouoverincallback;    //离开回调    wt3dobj.mouoverleavecallback = this.mouoverleavecallback;    //悬停触发时间长度    wt3dobj.mouovertimelong = 1000; }//单击选中modelbussiness.prototype.clicklectcabinet = function (_obj, _face) {}modelbussiness.prototype.currentshowcabinet = null;modelbussiness.prototype.currentstate = 0;//双击选中modelbussiness.prototype.dbclicklectcabinet = function (_obj, _face) {    if (!_obj.visible) {        return;    }    if (_obj.name.indexof("cube2_612") >= 0      ) {        modelbussiness.clickbuildanimation();    } el if (_obj.name.indexof("b1_floor_") >= 0      ) {        //显示楼层        modelbussiness.clickflooranimation(_obj);    } el if (_obj.name.indexof("floor_room_zt") >= 0      ) {        //显示楼层        modelbussiness.clickroomanimation(_obj);            } el if (_obj.name.indexof("b3_tv_2") >= 0 || _obj.name.indexof("messagepanel_2") >= 0) {        modelbussiness.retbuild();    }    //双击摄像机    el 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.mouovercallback = function (_obj, face) {}modelbussiness.prototype.mouincurrentobj = null;modelbussiness.prototype.lastmouincurrentobj = null;modelbussiness.prototype.mouoverincallback = function (_obj, face) {    var _this = this;    var color = 0xbfffea;    console.log(_obj.name);    modelbussiness.lastmouincurrentobj = _obj;    modelbussiness.mouincurrentobj = _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.mouincurrentobj = _sobj;        wt3dobj.commonfunc.tskincolorbyobj(_sobj, 0x00ffff);    } el if (_obj.name.indexof("b3_tv_2") >= 0) {        layer.msg("双击该电视返回园区总览");    } el if (_obj.name.indexof("messagepanel_2") >= 0) {        layer.msg("双击该信息牌返回园区总览");    }    }modelbussiness.prototype.mouoverleavecallback = 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.tskincolorbyobj(_sobj, 0x000000);    } el if (_obj.name.indexof("b3_tv_2") >= 0) {        layer.cloall();    } el if (_obj.name.indexof("messagepanel_2") >= 0) {        layer.cloall();    }}//双击大楼时动画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 = fal;    }).start();}//获取楼层模型对象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.retbuild = 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.cloall();}//加载楼层模型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 = fal;            });        }    };}//双击楼层时动画modelbussiness.prototype.clickflooranimation = function (floor) {    var _floornub = parint(floor.name.replace("b1_floor_", ""));    if (floor.name.indexof("b1_floor_top") >= 0) {        _floornub = "top";    } el {        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();

由于篇幅原因，这一课先介绍到这里

后面我将继续讲解用webgl 建立 3d园区 3d智慧小区 炫酷效果等等

技术交流 1203193731@qq.com

交流微信：

如果你有什么要交流的心得 可邮件我