经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » HTML5 » 查看文章
使用webgl(three.js)搭建3D智慧园区、3D大屏，3D楼宇，智慧灯杆三维展示，3D灯杆，web版3D,bim管理系统——第六课
来源：cnblogs　　作者：魂断蓝桥666　　时间：2019/10/8 9:24:10　　对本文有异议

前言：

今年是建国70周年，爱国热情异常的高涨，为自己身在如此安全、蓬勃发展的国家深感自豪。

我们公司楼下为庆祝国庆，拉了这样的标语，每个人做好一件事，就组成了我们强大的祖国。

看到这句话，深有感触，是的，强大的背后离不开我们每个人的奋力拼搏，作为基础研发的我们，我们也认认真真的做好每一次研发，不管成功失败，都是在前进的路上。

序：

今天要讲解的课程是《智慧园区与灯杆三维展示》课程。

首先我们描述一下智慧园区与灯杆的功能：

智慧园区：我们在上节课《使用webgl(three.js)搭建一个3D智慧园区、3D建筑，3D消防模拟，web版3D,bim管理系统——第四课（炫酷版一）》已经主要介绍过目前智慧园区的趋势功能 ，这里不再累赘描述。

　　　　　随着物联网的快速发展，人工智能的兴起，智慧园区就是将现有的前沿科技带入园区 带入家庭。

智慧灯杆：灯杆随处可见，但随着5G的来领，物联网的推广，人工智能的大力投入，智慧灯杆成了具体落实的重要体现。是智慧城市的重要组成部分。

　　　　　　目前市场上设计的智慧灯杆带有智慧大屏，安全数据采集，环境数据采集、交通数据采集、交通指挥、5G网络、一键报警、充电桩、无人机停机坪等等功能

技术交流 1203193731@qq.com

交流微信：

　　　　

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

 

一、效果功能展示：

闲话少叙，我们先看一下最终的实现效果：

1.1这是园区的整体情况

 1.2、这是整体到单栋楼宇的展示

 1.3、这是园区灯杆的整体情况

 

 1.4、这是灯杆的详情展示

 二、具体实现

2.1、首先我们准备场景中需要的模型

2.1.1、准备单栋楼宇的代码模型，这里我们主要还是用代码的方式实现大楼模型。我们这里做大楼的示意级模拟。

 大楼模型代码：

  1. [{"show":true,"uuid":"","name":"dt_build4_6","objType":"GroupObj","scale":{"x":1,"y":1,"z":1},"position":{"x":0,"y":0,"z":0},"rotation":[{"direction":"x","degree":0}],"childrens":[{"show":true,"uuid":"","name":"dt_build4_6OBJCREN0","objType":"ExtrudeGeometry","position":{"x":0,"y":3000,"z":0},"style":{"skinColor":2406143,"imgurl":"../../img/3dImg/battery-front2.png","repeatx":true,"width":0.003,"repeaty":true,"height":0.003,"opacity":1},"scale":{"x":1,"y":1,"z":1},"shapeParm":{"points":[{"x":30,"y":0,"type":"nomal"},{"x":350,"y":0,"type":"nomal"},{"x":350,"y":100,"type":"nomal"},{"x":350,"y":100,"type":"nomal"},{"x":650,"y":100,"type":"nomal"},{"x":650,"y":300,"type":"nomal"},{"x":-300,"y":300,"type":"nomal"},{"x":-300,"y":100,"type":"nomal"},{"x":30,"y":100,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":3000,"curveSegments":1,"steps":1,"bevelEnabled":true,"bevelThickness":1,"bevelSize":1,"bevelSegments":1,"extrudePathPoints":[]},"showSortNub":6,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":1.5707963267948966},{"direction":"y","degree":0},{"direction":"z","degree":0}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"dt_build4_6OBJCREN1","objType":"ExtrudeGeometry","position":{"x":0,"y":0,"z":0},"style":{"skinColor":2406143,"opacity":1},"scale":{"x":1,"y":1,"z":1},"shapeParm":{"points":[{"x":30,"y":0,"type":"nomal"},{"x":350,"y":0,"type":"nomal"},{"x":350,"y":100,"type":"nomal"},{"x":350,"y":100,"type":"nomal"},{"x":650,"y":100,"type":"nomal"},{"x":650,"y":300,"type":"nomal"},{"x":-300,"y":300,"type":"nomal"},{"x":-300,"y":100,"type":"nomal"},{"x":30,"y":100,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":300,"curveSegments":1,"steps":1,"bevelEnabled":true,"bevelThickness":1,"bevelSize":1,"bevelSegments":1,"extrudePathPoints":[]},"showSortNub":6,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":1.5707963267948963},{"direction":"y","degree":0},{"direction":"z","degree":0}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"dt_build4_6OBJCREN2","objType":"ExtrudeGeometry","position":{"x":421.488,"y":3144.366,"z":287.367},"style":{"skinColor":2406143,"imgurl":"../../img/3dImg/pump_metalreflect.jpg","repeatx":true,"width":0.001,"repeaty":true,"height":0.001,"opacity":1},"scale":{"x":1,"y":1,"z":1},"shapeParm":{"points":[{"x":5,"y":0,"type":"nomal"},{"x":5,"y":20,"type":"nomal"},{"x":20,"y":20,"type":"nomal"},{"x":0,"y":40,"type":"nomal"},{"x":-10,"y":40,"type":"nomal"},{"x":-10,"y":0,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":8,"curveSegments":1,"steps":1,"bevelEnabled":false,"bevelThickness":1,"bevelSize":1,"bevelSegments":1,"extrudePathPoints":[{"x":0,"y":0,"z":0},{"x":450,"y":0,"z":0}]},"showSortNub":11,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":-3.141592653589793},{"direction":"y","degree":0},{"direction":"z","degree":-3.141592653589793}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"dt_build4_6OBJCREN3","objType":"ExtrudeGeometry","position":{"x":406.396,"y":2995.278,"z":276.416},"style":{"skinColor":2406143,"imgurl":"../../img/3dImg/wall/winwall2.png","repeatx":true,"width":0.01,"repeaty":true,"height":4,"opacity":1},"scale":{"x":1,"y":1,"z":1},"shapeParm":{"points":[{"x":5,"y":0,"type":"nomal"},{"x":5,"y":10,"type":"nomal"},{"x":-150,"y":10,"type":"nomal"},{"x":-150,"y":0,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":8,"curveSegments":5,"steps":5,"bevelEnabled":false,"bevelThickness":1,"bevelSize":1,"bevelSegments":1,"extrudePathPoints":[{"x":0,"y":0,"z":0},{"x":0,"y":0,"z":-10},{"x":450,"y":0,"z":-10},{"x":450,"y":0,"z":-9},{"x":450,"y":0,"z":0}]},"showSortNub":11,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":-3.141592653589793},{"direction":"y","degree":0},{"direction":"z","degree":-3.141592653589793}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"dt_build4_6OBJCREN4","objType":"ExtrudeGeometry","position":{"x":322.981,"y":2999.819,"z":-1.84},"style":{"skinColor":2406143,"imgurl":"../../img/3dImg/pump_metalreflect.jpg","repeatx":true,"width":0.001,"repeaty":true,"height":0.001,"opacity":1},"scale":{"x":1,"y":1,"z":1},"shapeParm":{"points":[{"x":5,"y":0,"type":"nomal"},{"x":5,"y":20,"type":"nomal"},{"x":20,"y":20,"type":"nomal"},{"x":0,"y":40,"type":"nomal"},{"x":-10,"y":40,"type":"nomal"},{"x":-10,"y":0,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":8,"curveSegments":9,"steps":9,"bevelEnabled":false,"bevelThickness":1,"bevelSize":1,"bevelSegments":1,"extrudePathPoints":[{"x":0,"y":0,"z":0},{"x":30,"y":0,"z":0},{"x":30,"y":0,"z":1},{"x":30,"y":null,"z":100},{"x":31,"y":0,"z":100},{"x":320,"y":0,"z":100},{"x":330,"y":0,"z":101},{"x":330,"y":0,"z":300},{"x":329,"y":null,"z":300},{"x":70,"y":0,"z":300}]},"showSortNub":11,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"dt_build4_6OBJCREN5","objType":"ExtrudeGeometry","position":{"x":58.969,"y":3008.621,"z":17.159},"style":{"skinColor":2406143,"imgurl":"../../img/3dImg/wall/winwall2.png","repeatx":true,"width":0.01,"repeaty":true,"height":4,"opacity":1},"scale":{"x":1,"y":1,"z":1},"shapeParm":{"points":[{"x":5,"y":0,"type":"nomal"},{"x":5,"y":10,"type":"nomal"},{"x":-150,"y":10,"type":"nomal"},{"x":-150,"y":0,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":8,"curveSegments":5,"steps":5,"bevelEnabled":false,"bevelThickness":1,"bevelSize":1,"bevelSegments":1,"extrudePathPoints":[{"x":0,"y":0,"z":0},{"x":0,"y":0,"z":-10},{"x":250,"y":0,"z":-10},{"x":250,"y":0,"z":-9},{"x":250,"y":0,"z":0}]},"showSortNub":11,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"dt_build4_6OBJCREN6","objType":"ExtrudeGeometry","position":{"x":56.944,"y":3157.877,"z":-1.84},"style":{"skinColor":2406143,"imgurl":"../../img/3dImg/pump_metalreflect.jpg","repeatx":true,"width":0.001,"repeaty":true,"height":0.001,"opacity":1},"scale":{"x":1,"y":1,"z":1},"shapeParm":{"points":[{"x":5,"y":0,"type":"nomal"},{"x":5,"y":20,"type":"nomal"},{"x":20,"y":20,"type":"nomal"},{"x":0,"y":40,"type":"nomal"},{"x":-10,"y":40,"type":"nomal"},{"x":-10,"y":0,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":8,"curveSegments":1,"steps":1,"bevelEnabled":false,"bevelThickness":1,"bevelSize":1,"bevelSegments":1,"extrudePathPoints":[{"x":0,"y":0,"z":0},{"x":250,"y":0,"z":0}]},"showSortNub":11,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"dt_build4_6OBJCREN7","objType":"ExtrudeGeometry","position":{"x":55.698,"y":2998.081,"z":-1.84},"style":{"skinColor":2406143,"imgurl":"../../img/3dImg/pump_metalreflect.jpg","repeatx":true,"width":0.001,"repeaty":true,"height":0.001,"opacity":1},"scale":{"x":1,"y":1,"z":1},"shapeParm":{"points":[{"x":5,"y":0,"type":"nomal"},{"x":5,"y":-20,"type":"nomal"},{"x":20,"y":-20,"type":"nomal"},{"x":0,"y":-40,"type":"nomal"},{"x":-10,"y":-40,"type":"nomal"},{"x":-10,"y":0,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":8,"curveSegments":9,"steps":9,"bevelEnabled":false,"bevelThickness":1,"bevelSize":1,"bevelSegments":1,"extrudePathPoints":[{"x":0,"y":0,"z":0},{"x":-30,"y":0,"z":0},{"x":-30,"y":0,"z":1},{"x":-30,"y":null,"z":100},{"x":-31,"y":0,"z":100},{"x":-340,"y":0,"z":100},{"x":-350,"y":0,"z":101},{"x":-350,"y":0,"z":300},{"x":-329,"y":null,"z":300},{"x":-70,"y":0,"z":300}]},"showSortNub":11,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"dt_build4_6OBJCREN8","objType":"cube2","length":80,"width":150,"height":150,"x":205.342,"y":3077.89,"z":103.364,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":2406143,"side":1,"opacity":1,"imgurl":"../../img/3dImg/floor.png","repeatx":true,"width":2,"repeaty":true,"height":2},"skin_down":{"skinColor":16777215,"side":1,"opacity":1},"skin_fore":{"skinColor":2406143,"side":1,"opacity":1,"imgurl":"../../img/3dImg/floor.png","repeatx":true,"width":2,"repeaty":true,"height":2},"skin_behind":{"skinColor":2406143,"side":1,"opacity":1,"imgurl":"../../img/3dImg/floor.png","repeatx":true,"width":2,"repeaty":true,"height":2},"skin_left":{"skinColor":2406143,"side":1,"opacity":1,"imgurl":"../../img/3dImg/floor.png","repeatx":true,"width":2,"repeaty":true,"height":2},"skin_right":{"skinColor":2406143,"side":1,"opacity":1,"imgurl":"../../img/3dImg/floor.png","repeatx":true,"width":2,"repeaty":true,"height":2}}},"showSortNub":12,"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":"dt_build4_6OBJCREN9","objType":"ExtrudeGeometry","position":{"x":0,"y":2994.515,"z":0},"style":{"skinColor":2406143,"opacity":1},"scale":{"x":1,"y":1,"z":1},"shapeParm":{"points":[{"x":30,"y":0,"type":"nomal"},{"x":350,"y":0,"type":"nomal"},{"x":350,"y":100,"type":"nomal"},{"x":350,"y":100,"type":"nomal"},{"x":650,"y":100,"type":"nomal"},{"x":650,"y":300,"type":"nomal"},{"x":-300,"y":300,"type":"nomal"},{"x":-300,"y":100,"type":"nomal"},{"x":30,"y":100,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":1,"curveSegments":1,"steps":1,"bevelEnabled":true,"bevelThickness":1,"bevelSize":1,"bevelSegments":1,"extrudePathPoints":[]},"showSortNub":6,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":1.5707963267948966},{"direction":"y","degree":0},{"direction":"z","degree":0}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null}],"showSortNub":6}]
View Code

 2.1.2、这是四栋单体大楼的样子

2.1.3、我们同样用代码，写出灯杆模型的样子

灯杆模型代码：

  1. [{"show":true,"uuid":"","name":"denggan_6","objType":"GroupObj","scale":{"x":1,"y":1,"z":1},"position":{"x":0,"y":0,"z":0},"rotation":[{"direction":"x","degree":0}],"childrens":[{"show":true,"uuid":"","name":"denggan_6OBJCREN0","objType":"Lathe","position":{"x":0,"y":-50.28,"z":0},"points":[{"x":8,"y":-350,"z":0},{"x":8,"y":350,"z":0},{"x":0,"y":350,"z":0}],"style":{"skinColor":16777215,"imgurl":"../../img/3dimg/jsfgcz.jpg","side":2,"opacity":1},"segments":2,"radialSegments":6,"closed":true,"phiStart":0,"phiLength":6.283185307179586,"showSortNub":6,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"radius":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"denggan_6OBJCREN1","objType":"Lathe","position":{"x":44.784,"y":187.025,"z":0},"points":[{"x":0,"y":0,"z":0},{"x":12,"y":0,"z":0},{"x":12,"y":1,"z":0},{"x":12,"y":4,"z":null},{"x":11,"y":6,"z":null},{"x":9,"y":10,"z":null},{"x":6,"y":12,"z":null},{"x":2,"y":14,"z":null},{"x":2,"y":20,"z":null}],"style":{"skinColor":16777215,"imgurl":"../../img/3dimg/inside_lightmap2.jpg","repeatx":true,"width":1,"repeaty":true,"height":1,"side":2,"opacity":1},"segments":8,"radialSegments":8,"closed":true,"phiStart":0,"phiLength":6.281439977927592,"showSortNub":6,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":-1.5707963267948966},{"direction":"z","degree":0}],"radius":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"denggan_6OBJCREN2","objType":"Lathe","position":{"x":0,"y":292.12,"z":0},"points":[{"x":2,"y":0,"z":0},{"x":2,"y":10,"z":0},{"x":8,"y":10,"z":0},{"x":8,"y":40,"z":null},{"x":0,"y":40,"z":null}],"style":{"skinColor":16777215,"imgurl":"../../img/3dimg/jsfgcz.png","repeatx":true,"width":2,"repeaty":true,"height":12,"side":2,"opacity":1},"segments":4,"radialSegments":8,"closed":true,"phiStart":0,"phiLength":6.283185307179586,"showSortNub":6,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"radius":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"denggan_6OBJCREN3","objType":"ExtrudeGeometry","position":{"x":-7.371,"y":148.997,"z":2.661},"style":{"skinColor":16777215,"imgurl":"../../img/3dimg/jsfgcz.jpg","repeatx":true,"width":0.01,"repeaty":true,"height":0.01,"opacity":1},"scale":{"x":0.5,"y":0.5,"z":0.5},"shapeParm":{"points":[{"x":0,"y":0,"type":"nomal"},{"x":-2,"y":-20,"type":"nomal"},{"x":-2,"y":70,"type":"nomal"},{"x":3,"y":70,"type":"nomal"},{"x":3,"y":60,"type":"nomal"},{"x":55,"y":60,"type":"nomal"},{"x":3,"y":55,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":10,"curveSegments":6,"steps":1,"bevelEnabled":true,"bevelThickness":1,"bevelSize":1,"bevelSegments":1,"extrudePathPoints":[]},"showSortNub":8,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":-3.141592653589793},{"direction":"y","degree":0},{"direction":"z","degree":-3.141592653589793}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"denggan_6OBJCREN4","objType":"ExtrudeGeometry","position":{"x":-9.903,"y":-474.611,"z":-21.666},"style":{"skinColor":16777215,"imgurl":"../../img/3dimg/jsfgcz.jpg","repeatx":true,"width":0.005,"repeaty":true,"height":0.01,"opacity":1},"scale":{"x":0.5,"y":0.5,"z":0.5},"shapeParm":{"points":[{"x":2,"y":-200,"type":"nomal"},{"x":-2,"y":-200,"type":"nomal"},{"x":-2,"y":70,"type":"nomal"},{"x":3,"y":70,"type":"nomal"},{"x":3,"y":60,"type":"nomal"},{"x":20,"y":55,"type":"nomal"},{"x":3,"y":55,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":40,"curveSegments":6,"steps":1,"bevelEnabled":true,"bevelThickness":1,"bevelSize":1,"bevelSegments":1,"extrudePathPoints":[]},"showSortNub":8,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":1.5707963267948966},{"direction":"z","degree":0}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"denggan_6OBJCREN5","objType":"ExtrudeGeometry","position":{"x":-9.513,"y":268.062,"z":7.917},"style":{"skinColor":16758371,"imgurl":"../../img/3dimg/jsfgcz.jpg","repeatx":true,"width":0.01,"repeaty":true,"height":0.01,"opacity":1},"scale":{"x":1,"y":1,"z":1},"shapeParm":{"points":[{"x":0,"y":0,"type":"nomal"},{"x":0,"y":0,"type":"bezier3"},{"x":-10,"y":60,"type":"bezier3"},{"x":80,"y":80,"type":"bezier3"},{"x":80,"y":80,"type":"absarc","radius":10,"startAngle":0,"endAngle":5.235987755982989,"Clockwise":true},{"x":80,"y":70,"type":"bezier3"},{"x":0,"y":60,"type":"bezier3"},{"x":0,"y":-20,"type":"bezier3"},{"x":-2,"y":-20,"type":"nomal"},{"x":-2,"y":30,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":15,"curveSegments":6,"steps":1,"bevelEnabled":true,"bevelThickness":1,"bevelSize":1,"bevelSegments":1,"extrudePathPoints":[]},"showSortNub":8,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":-3.141592653589793},{"direction":"y","degree":0},{"direction":"z","degree":-3.141592653589793}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"denggan_6OBJCREN6","objType":"ExtrudeGeometry","position":{"x":8.999,"y":268.76,"z":-7.394},"style":{"skinColor":16758371,"imgurl":"../../img/3dimg/jsfgcz.jpg","repeatx":true,"width":0.01,"repeaty":true,"height":0.01,"opacity":1},"scale":{"x":1,"y":1,"z":1},"shapeParm":{"points":[{"x":0,"y":0,"type":"nomal"},{"x":0,"y":0,"type":"bezier3"},{"x":-10,"y":60,"type":"bezier3"},{"x":80,"y":80,"type":"bezier3"},{"x":80,"y":80,"type":"absarc","radius":10,"startAngle":0,"endAngle":5.235987755982989,"Clockwise":true},{"x":80,"y":70,"type":"bezier3"},{"x":0,"y":60,"type":"bezier3"},{"x":0,"y":-20,"type":"bezier3"},{"x":-2,"y":-20,"type":"nomal"},{"x":-2,"y":30,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":15,"curveSegments":6,"steps":1,"bevelEnabled":true,"bevelThickness":1,"bevelSize":1,"bevelSegments":1,"extrudePathPoints":[]},"showSortNub":8,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"denggan_6OBJCREN7","objType":"ExtrudeGeometry","position":{"x":-7.456,"y":234.083,"z":7.901},"style":{"skinColor":16758371,"imgurl":"../../img/3dimg/jsfgcz.jpg","repeatx":true,"width":0.01,"repeaty":true,"height":0.01,"materialType":"Phong","opacity":1},"scale":{"x":1,"y":1,"z":1},"shapeParm":{"points":[{"x":0,"y":0,"type":"nomal"},{"x":0,"y":20,"type":"nomal"},{"x":0,"y":20,"type":"bezier3"},{"x":0,"y":40,"type":"bezier3"},{"x":60,"y":80,"type":"bezier3"},{"x":60,"y":55,"type":"bezier3"},{"x":0,"y":40,"type":"bezier3"},{"x":0,"y":0,"type":"bezier3"}],"holes":[]},"extrudeSettings":{"amount":15,"curveSegments":6,"steps":1,"bevelEnabled":true,"bevelThickness":1,"bevelSize":1,"bevelSegments":1,"extrudePathPoints":[]},"showSortNub":8,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":-3.141592653589793},{"direction":"y","degree":0},{"direction":"z","degree":-3.141592653589793}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"denggan_6OBJCREN8","objType":"ExtrudeGeometry","position":{"x":6.545,"y":234.083,"z":-7.59},"style":{"skinColor":16758371,"imgurl":"../../img/3dimg/jsfgcz.jpg","repeatx":true,"width":0.01,"repeaty":true,"height":0.01,"materialType":"Phong","opacity":1},"scale":{"x":1,"y":1,"z":1},"shapeParm":{"points":[{"x":0,"y":0,"type":"nomal"},{"x":0,"y":20,"type":"nomal"},{"x":0,"y":20,"type":"bezier3"},{"x":0,"y":40,"type":"bezier3"},{"x":60,"y":80,"type":"bezier3"},{"x":60,"y":55,"type":"bezier3"},{"x":0,"y":40,"type":"bezier3"},{"x":0,"y":0,"type":"bezier3"}],"holes":[]},"extrudeSettings":{"amount":15,"curveSegments":6,"steps":1,"bevelEnabled":true,"bevelThickness":1,"bevelSize":1,"bevelSegments":1,"extrudePathPoints":[]},"showSortNub":8,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"denggan_6OBJCREN9","objType":"ExtrudeGeometry","position":{"x":7.341,"y":171.124,"z":-1.865},"style":{"skinColor":16777215,"imgurl":"../../img/3dimg/jsfgcz.jpg","repeatx":true,"width":0.01,"repeaty":true,"height":0.01,"opacity":1},"scale":{"x":0.5,"y":0.5,"z":0.5},"shapeParm":{"points":[{"x":0,"y":0,"type":"nomal"},{"x":0,"y":0,"type":"bezier3"},{"x":-10,"y":60,"type":"bezier3"},{"x":80,"y":80,"type":"bezier3"},{"x":80,"y":80,"type":"absarc","radius":10,"startAngle":0,"endAngle":5.235987755982989,"Clockwise":true},{"x":80,"y":70,"type":"bezier3"},{"x":0,"y":60,"type":"bezier3"},{"x":0,"y":-20,"type":"bezier3"},{"x":-2,"y":-20,"type":"nomal"},{"x":-2,"y":70,"type":"nomal"},{"x":3,"y":70,"type":"nomal"},{"x":3,"y":60,"type":"nomal"},{"x":35,"y":60,"type":"nomal"},{"x":3,"y":55,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":8,"curveSegments":6,"steps":1,"bevelEnabled":true,"bevelThickness":1,"bevelSize":1,"bevelSegments":1,"extrudePathPoints":[]},"showSortNub":8,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"denggan_6OBJCREN10","objType":"ExtrudeGeometry","position":{"x":7.323,"y":-164.938,"z":-3.237},"style":{"skinColor":16777215,"imgurl":"../../img/3dimg/inside_lightmap2.jpg","repeatx":true,"width":0.01,"repeaty":true,"height":0.01,"materialType":"Phong","opacity":1},"scale":{"x":1,"y":1,"z":1},"shapeParm":{"points":[{"x":0,"y":0,"type":"nomal"},{"x":0,"y":10,"type":"nomal"},{"x":0,"y":10,"type":"bezier3"},{"x":0,"y":40,"type":"bezier3"},{"x":60,"y":45,"type":"bezier3"},{"x":60,"y":48,"type":"nomal"},{"x":-5,"y":48,"type":"nomal"},{"x":-5,"y":200,"type":"nomal"},{"x":60,"y":200,"type":"nomal"},{"x":60,"y":200,"type":"bezier3"},{"x":0,"y":205,"type":"bezier3"},{"x":0,"y":245,"type":"bezier3"},{"x":-16,"y":245,"type":"nomal"},{"x":-16,"y":245,"type":"bezier3"},{"x":-16,"y":205,"type":"bezier3"},{"x":-76,"y":200,"type":"bezier3"},{"x":-10,"y":200,"type":"nomal"},{"x":-10,"y":48,"type":"nomal"},{"x":-76,"y":48,"type":"nomal"},{"x":-76,"y":45,"type":"nomal"},{"x":-76,"y":45,"type":"bezier3"},{"x":-16,"y":40,"type":"bezier3"},{"x":-16,"y":10,"type":"bezier3"},{"x":-16,"y":0,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":5,"curveSegments":6,"steps":1,"bevelEnabled":true,"bevelThickness":1,"bevelSize":1,"bevelSegments":1,"extrudePathPoints":[]},"showSortNub":8,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"denggan_6OBJCREN11","objType":"GroupObj","scale":{"x":0.6,"y":0.6,"z":0.6},"position":{"x":-27.661,"y":157.389,"z":0},"rotation":[{"direction":"x","degree":0.0265639112153537},{"direction":"y","degree":-1.5707963267948966},{"direction":"z","degree":0}],"childrens":[{"show":true,"uuid":"","name":"wbcljcy_13OBJCREN0","objType":"GroupObj","scale":{"x":1,"y":1,"z":1.4},"position":{"x":0,"y":-1.719,"z":0},"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":1.5707963267948966},{"direction":"z","degree":0}],"childrens":[{"show":true,"uuid":"","name":"wbcljcy_13OBJCREN0OBJCREN0","objType":"Lathe","position":{"x":0,"y":0,"z":0},"points":[{"x":0,"y":0,"z":0},{"x":20,"y":0,"z":0},{"x":20,"y":2,"z":0},{"x":22,"y":2,"z":0},{"x":22,"y":4,"z":0},{"x":20,"y":4,"z":null},{"x":20,"y":15,"z":null},{"x":0,"y":15,"z":null}],"style":{"skinColor":16777215,"imgurl":"../../img/3dimg/inside_lightmap.jpg","repeatx":true,"width":1,"repeaty":true,"height":3,"side":2,"opacity":1},"segments":7,"radialSegments":4,"closed":true,"phiStart":0,"phiLength":6.283185307179586,"showSortNub":6,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0.7576823348757783},{"direction":"y","degree":0.23120376601168885},{"direction":"z","degree":-1.3331522958433486}],"radius":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null}],"showSortNub":6,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"wbcljcy_13OBJCREN1","objType":"ExtrudeGeometry","position":{"x":-7.471,"y":5.086,"z":-16.187},"style":{"skinColor":14345446,"opacity":1},"scale":{"x":1,"y":1,"z":1},"shapeParm":{"points":[{"x":3,"y":0,"type":"nomal"},{"x":0,"y":8,"type":"nomal"},{"x":0,"y":0,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":15,"curveSegments":1,"steps":1,"bevelEnabled":true,"bevelThickness":1,"bevelSize":1,"bevelSegments":1,"extrudePathPoints":[]},"showSortNub":13,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":-3.141592653589793},{"direction":"y","degree":1.5707963267948966},{"direction":"z","degree":0}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"wbcljcy_13OBJCREN2","objType":"ExtrudeGeometry","position":{"x":0.11,"y":8.731,"z":-33.618},"style":{"skinColor":14345446,"opacity":1},"scale":{"x":1,"y":1,"z":1},"shapeParm":{"points":[{"x":8,"y":0,"type":"nomal"},{"x":5,"y":1,"type":"nomal"},{"x":-5,"y":1,"type":"nomal"},{"x":-8,"y":0,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":15,"curveSegments":1,"steps":1,"bevelEnabled":true,"bevelThickness":1,"bevelSize":1,"bevelSegments":1,"extrudePathPoints":[]},"showSortNub":13,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":1.5707963267948963},{"direction":"y","degree":0},{"direction":"z","degree":0}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"wbcljcy_13OBJCREN3","objType":"ExtrudeGeometry","position":{"x":0,"y":0,"z":-31.719},"style":{"skinColor":14345446,"opacity":1},"scale":{"x":1,"y":1,"z":1},"shapeParm":{"points":[{"x":5,"y":0,"type":"nomal"},{"x":5,"y":2,"type":"nomal"},{"x":-5,"y":2,"type":"nomal"},{"x":-5,"y":0,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":15,"curveSegments":1,"steps":1,"bevelEnabled":true,"bevelThickness":1,"bevelSize":1,"bevelSegments":1,"extrudePathPoints":[]},"showSortNub":13,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null}],"showSortNub":13,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"denggan_6OBJCREN12","objType":"cube2","length":62,"width":5,"height":150,"x":36.985,"y":-40.05,"z":-1,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":6710886,"side":1,"opacity":1},"skin_down":{"skinColor":6710886,"side":1,"opacity":1},"skin_fore":{"skinColor":6710886,"side":1,"opacity":1},"skin_behind":{"skinColor":6710886,"side":1,"opacity":1},"skin_left":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/dp3.png"},"skin_right":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/dp4.png"}}},"showSortNub":20,"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":"denggan_6OBJCREN13","objType":"Lathe","position":{"x":44.784,"y":188.722,"z":0},"points":[{"x":0,"y":0,"z":0},{"x":10,"y":0,"z":0},{"x":10,"y":1,"z":0},{"x":10,"y":4,"z":null},{"x":9,"y":6,"z":null},{"x":7,"y":10,"z":null},{"x":4,"y":12,"z":null},{"x":0,"y":13,"z":null}],"style":{"skinColor":1315084,"imgurl":"../../img/3dimg/inside_lightmap2.jpg","repeatx":true,"width":1,"repeaty":true,"height":1,"side":2,"opacity":0.9},"segments":8,"radialSegments":8,"closed":true,"phiStart":0,"phiLength":6.281439977927592,"showSortNub":600,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":3.141592653589793},{"direction":"y","degree":-1.5707963267948966},{"direction":"z","degree":0}],"radius":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"denggan_6OBJCREN14","objType":"cube2","length":12,"width":5,"height":18,"x":-0.709,"y":-458.75,"z":-22.628,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":16728128,"side":1,"opacity":1,"imgurl":"../../img/3dimg/rack_inside2.jpg"},"skin_down":{"skinColor":16728128,"side":1,"opacity":1,"imgurl":"../../img/3dimg/rack_inside2.jpg"},"skin_fore":{"skinColor":16728128,"side":1,"opacity":1,"imgurl":"../../img/3dimg/rack_inside2.jpg"},"skin_behind":{"skinColor":16728128,"side":1,"opacity":1,"imgurl":"../../img/3dimg/rack_inside2.jpg"},"skin_left":{"skinColor":16728128,"side":1,"opacity":1,"imgurl":"../../img/3dimg/yjbjxt1.png"},"skin_right":{"skinColor":16728128,"side":1,"opacity":1,"imgurl":"../../img/3dimg/rack_inside2.jpg"}}},"showSortNub":36,"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":"denggan_6OBJCREN15","objType":"Lathe","position":{"x":0,"y":-594.032,"z":0},"points":[{"x":30,"y":-5,"z":0},{"x":30,"y":0,"z":0},{"x":20,"y":2,"z":0},{"x":20,"y":5,"z":0},{"x":28,"y":15,"z":null},{"x":25,"y":150,"z":null},{"x":9,"y":250,"z":null},{"x":0,"y":250,"z":0}],"style":{"skinColor":16777215,"imgurl":"../../img/3dimg/jsfgcz.jpg","side":2,"opacity":1},"segments":7,"radialSegments":5,"closed":true,"phiStart":0,"phiLength":6.283167853887067,"showSortNub":6,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"radius":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"denggan_6OBJCREN16","objType":"cube2","length":24,"width":5,"height":60,"x":0.243,"y":-505.247,"z":-22.193,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dimg/rack_inside2.jpg"},"skin_down":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dimg/rack_inside2.jpg"},"skin_fore":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dimg/rack_inside2.jpg"},"skin_behind":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dimg/rack_inside2.jpg"},"skin_left":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dimg/cqz.png"},"skin_right":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dimg/rack_inside2.jpg"}}},"showSortNub":36,"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":"denggan_6OBJCREN17","objType":"cube2","length":20,"width":5,"height":35,"x":0.243,"y":-555.713,"z":-22.193,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dimg/rack_inside2.jpg"},"skin_down":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dimg/rack_inside2.jpg"},"skin_fore":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dimg/rack_inside2.jpg"},"skin_behind":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dimg/rack_inside2.jpg"},"skin_left":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dimg/door4_right.jpg"},"skin_right":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dimg/rack_inside2.jpg"}}},"showSortNub":36,"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":"denggan_6OBJCREN18","objType":"cube2","length":62,"width":5,"height":150,"x":-37.869,"y":-40.05,"z":-1,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":6710886,"side":1,"opacity":1},"skin_down":{"skinColor":6710886,"side":1,"opacity":1},"skin_fore":{"skinColor":6710886,"side":1,"opacity":1},"skin_behind":{"skinColor":6710886,"side":1,"opacity":1},"skin_left":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/dp1.png"},"skin_right":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/dp2.png"}}},"showSortNub":20,"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":"denggan_6OBJCREN19","objType":"GroupObj","scale":{"x":0.1,"y":0.1,"z":0.1},"position":{"x":-29.27,"y":176.851,"z":12.782},"rotation":[{"direction":"x","degree":-2.96705972839036},{"direction":"y","degree":0},{"direction":"z","degree":-3.141592653589793}],"childrens":[{"show":true,"uuid":"","name":"gudingshexiangji_22OBJCREN0","objType":"ShapeGeometry","position":{"x":52.507,"y":86.93,"z":253.187},"style":{"skinColor":16117482,"imgurl":"../../img/3dImg/inside_lightmap2.jpg","repeatx":true,"width":0.01,"repeaty":true,"height":0.01,"side":2,"opacity":1},"scale":{"x":1,"y":1,"z":1},"shapeParm":{"points":[{"x":50,"y":0,"type":"nomal"},{"x":50,"y":250,"type":"nomal"},{"x":45,"y":250,"type":"nomal"},{"x":10,"y":280,"type":"nomal"},{"x":0,"y":280,"type":"nomal"},{"x":0,"y":0,"type":"nomal"}],"holes":[]},"showSortNub":7,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":-1.5707963267948963},{"direction":"y","degree":1.5707963267948966},{"direction":"z","degree":0}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"gudingshexiangji_22OBJCREN1","objType":"ShapeGeometry","position":{"x":-32.512,"y":86.93,"z":253.187},"style":{"skinColor":16117482,"imgurl":"../../img/3dImg/inside_lightmap2.jpg","repeatx":true,"width":0.001,"repeaty":true,"height":0.001,"side":2,"opacity":1},"scale":{"x":1,"y":1,"z":1},"shapeParm":{"points":[{"x":50,"y":0,"type":"nomal"},{"x":50,"y":250,"type":"nomal"},{"x":45,"y":250,"type":"nomal"},{"x":10,"y":280,"type":"nomal"},{"x":0,"y":280,"type":"nomal"},{"x":0,"y":0,"type":"nomal"}],"holes":[]},"showSortNub":7,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":-1.5707963267948963},{"direction":"y","degree":1.5707963267948966},{"direction":"z","degree":0}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"gudingshexiangji_22OBJCREN2","objType":"ShapeGeometry","position":{"x":-32.297,"y":86.51,"z":253.187},"style":{"skinColor":16117482,"imgurl":"../../img/3dImg/inside_lightmap2.jpg","repeatx":true,"width":0.01,"repeaty":true,"height":0.001,"side":2,"opacity":1},"scale":{"x":1,"y":1,"z":1},"shapeParm":{"points":[{"x":85,"y":0,"type":"nomal"},{"x":85,"y":280,"type":"nomal"},{"x":0,"y":280,"type":"nomal"},{"x":0,"y":0,"type":"nomal"}],"holes":[]},"showSortNub":7,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":-1.5707963267948963},{"direction":"y","degree":0},{"direction":"z","degree":0}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"gudingshexiangji_22OBJCREN3","objType":"ExtrudeGeometry","position":{"x":19.771,"y":2.894,"z":251.879},"style":{"skinColor":14078157,"imgurl":"../../img/3dImg/inside_lightmap2.jpg","repeatx":true,"width":0.0001,"repeaty":true,"height":0.001,"opacity":1},"scale":{"x":1,"y":1,"z":1},"shapeParm":{"points":[{"x":0,"y":5,"type":"nomal"},{"x":40,"y":5,"type":"nomal"},{"x":45,"y":10,"type":"nomal"},{"x":50,"y":10,"type":"nomal"},{"x":50,"y":80,"type":"nomal"},{"x":-30,"y":80,"type":"nomal"},{"x":-30,"y":10,"type":"nomal"},{"x":-25,"y":10,"type":"nomal"},{"x":-20,"y":5,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":250,"curveSegments":1,"steps":1,"bevelEnabled":true,"bevelThickness":1,"bevelSize":1,"bevelSegments":1,"extrudePathPoints":[]},"showSortNub":6,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":-3.141592653589793},{"direction":"y","degree":0},{"direction":"z","degree":-3.141592653589793}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"name":"gudingshexiangji_22OBJCREN4","objType":"cylinder","radiusTop":25,"radiusBottom":20,"height":10,"segmentsX":16,"segmentsY":0,"openEnded":false,"position":{"x":9.607,"y":46.007,"z":1.254},"scale":{"x":1,"y":1,"z":1},"rotation":[{"direction":"x","degree":-1.5707963267948966},{"direction":"y","degree":0},{"direction":"z","degree":0}],"style":{"skinColor":16776960,"skin":{"skin_up":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/camera.png"},"skin_down":{"skinColor":1841947,"side":1,"opacity":1},"skin_side":{"skinColor":4538946,"opacity":1}}},"showSortNub":10,"show":true,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"gudingshexiangji_22OBJCREN5","objType":"ShapeGeometry","position":{"x":-17.261,"y":6.463,"z":161.14},"style":{"skinColor":16117482,"imgurl":"../../img/3dImg/inside_lightmap2.jpg","repeatx":true,"width":0.01,"repeaty":true,"height":0.001,"side":2,"opacity":1},"scale":{"x":1,"y":1,"z":1},"shapeParm":{"points":[{"x":50,"y":0,"type":"nomal"},{"x":50,"y":50,"type":"nomal"},{"x":0,"y":50,"type":"nomal"},{"x":0,"y":0,"type":"nomal"}],"holes":[]},"showSortNub":7,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":-1.5707963267948966},{"direction":"y","degree":0},{"direction":"z","degree":0}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"gudingshexiangji_22OBJCREN6","objType":"ShapeGeometry","position":{"x":32.985,"y":6.687,"z":136.337},"style":{"skinColor":16117482,"imgurl":"../../img/3dImg/inside_lightmap2.jpg","repeatx":true,"width":0.01,"repeaty":true,"height":0.001,"side":2,"opacity":1},"scale":{"x":1,"y":1,"z":1},"shapeParm":{"points":[{"x":0,"y":0,"type":"nomal"},{"x":0,"y":0,"type":"absarc","radius":25,"startAngle":1.5707963267948966,"endAngle":4.71238898038469,"Clockwise":true},{"x":0,"y":0,"type":"nomal"}],"holes":[]},"showSortNub":7,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":-1.5707963267948966},{"direction":"y","degree":1.5677943604814664},{"direction":"z","degree":0}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"gudingshexiangji_22OBJCREN7","objType":"ShapeGeometry","position":{"x":-17.261,"y":6.687,"z":136.337},"style":{"skinColor":16117482,"imgurl":"../../img/3dImg/inside_lightmap2.jpg","repeatx":true,"width":0.01,"repeaty":true,"height":0.001,"side":2,"opacity":1},"scale":{"x":1,"y":1,"z":1},"shapeParm":{"points":[{"x":0,"y":0,"type":"nomal"},{"x":0,"y":0,"type":"absarc","radius":25,"startAngle":1.5707963267948966,"endAngle":4.71238898038469,"Clockwise":true},{"x":0,"y":0,"type":"nomal"}],"holes":[]},"showSortNub":7,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":-1.5707963267948966},{"direction":"y","degree":1.5677943604814664},{"direction":"z","degree":0}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null}],"showSortNub":22,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"denggan_6OBJCREN20","objType":"Lathe","position":{"x":-15.417,"y":177.312,"z":-0.222},"points":[{"x":1,"y":0,"z":0},{"x":1,"y":5,"z":0},{"x":6,"y":5,"z":0},{"x":6,"y":20,"z":null},{"x":0,"y":20,"z":null}],"style":{"skinColor":16777215,"imgurl":"../../img/3dimg/eee.png","repeatx":true,"width":2,"repeaty":true,"height":2,"side":2,"opacity":1},"segments":4,"radialSegments":8,"closed":true,"phiStart":0,"phiLength":6.283185307179586,"showSortNub":6,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"radius":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null}],"showSortNub":6}]
View Code

 2.1.4、我们再看看汽车的代码模型

 

 

简易示意级小汽车模型代码

  1. [{"show":true,"uuid":"","name":"car_13","objType":"ExtrudeGeometry","position":{"x":126.979,"y":-470.818,"z":6253.392},"style":{"skinColor":393115,"opacity":0.5},"scale":{"x":1,"y":1,"z":1},"shapeParm":{"points":[{"x":0,"y":0,"type":"nomal"},{"x":100,"y":0,"type":"nomal"},{"x":120,"y":10,"type":"absarc","radius":30,"startAngle":3.490658503988659,"endAngle":5.93411945678072,"Clockwise":false},{"x":200,"y":0,"type":"nomal"},{"x":190,"y":0,"type":"bezier3"},{"x":240,"y":30,"type":"bezier3"},{"x":120,"y":30,"type":"bezier3"},{"x":100,"y":40,"type":"bezier3"},{"x":50,"y":80,"type":"bezier3"},{"x":-80,"y":60,"type":"bezier3"},{"x":-80,"y":60,"type":"bezier3"},{"x":-100,"y":40,"type":"bezier3"},{"x":-180,"y":20,"type":"bezier3"},{"x":-180,"y":0,"type":"nomal"},{"x":-100,"y":10,"type":"absarc","radius":30,"startAngle":3.6651914291880923,"endAngle":5.759586531581287,"Clockwise":false}],"holes":[]},"extrudeSettings":{"amount":0,"curveSegments":6,"steps":1,"bevelEnabled":true,"bevelThickness":1,"bevelSize":1,"bevelSegments":1,"extrudePathPoints":[{"x":-75,"y":0,"z":0},{"x":75,"y":0,"z":0}]},"showSortNub":6,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":-3.141592653589793},{"direction":"y","degree":0},{"direction":"z","degree":-3.141592653589793}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null}]

 

 

 2.2、模型组装

2.2.1、首先我们先用代码实现科技感背景划线。主要使用THREE.SplineCurve3的方法画出科技栅格。

2.2.2、接下来就是在科技栅格上添加环境背景图，在山体处做一个向上的拉伸。

  1. [{"show":true,"uuid":"","name":"cube2","objType":"cube2","length":100000,"width":100000,"height":1,"x":0,"y":-333.297,"z":0,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bg2.png","repeatx":true,"width":20,"repeaty":true,"height":20},"skin_down":{"skinColor":990026,"side":1,"opacity":1},"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":0.6,"y":1,"z":0.6},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"cube2_1","objType":"cube2","length":20480,"width":20480,"height":1,"x":-843.065,"y":-322.009,"z":-5362.314,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":2648555,"side":1,"opacity":0.7,"imgurl":"../../img/3dImg/jxb7.jpg"},"skin_down":{"skinColor":16777215,"side":1,"opacity":0},"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":6,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":-0.027488934914202758},{"direction":"z","degree":0}],"thick":null,"scale":{"x":1.1,"y":1,"z":1.1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null}]
View Code

 2.2.3、下面我们要给道路添加上车流的效果，这里和上节课一样，首先是要确定车流的点位，然后利用点位数据，添加特效模型

 

 光线特效模型代码

这里的道路光线 我们使用模型特效

 

{
"show": true,
"uuid": "",
"name": "flowtube",
"objType": "flowTube",
"points": [{
"x": -40000,
"y": 0,
"z": 0
}, {
"x": 40000,
"y": 0,
"z": 0
}],
"position": {
"x": -828.5,
"y": -285.697,
"z": 3070.868
},
"scale": {
"x": 1,
"y": 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": 2,
"cMarginW": 0.2,
"cMarginH": 0.2,
"speed": 8,
"fps": 40,
"direction": "w",
"forward": "f",
"side": 2,
"run": true,
"bgcolor": "rgba(255, 119, 0, 0.26)"
}
},
"segments": 1,
"radialSegments": 2,
"closed": false,
"radius": 40,
"showSortNub": 205,
"customType1": "",
"customType2": "",
"animation": null,
"dbclickEvents": null,
"BindDevId": null,
"BindDevName": null,
"devInfo": null,
"BindMeteId": null,
"BindMeteName": null
}, 
"segments": 64,
"radialSegments": 4,
"closed": false,
"radius": 50,
"showSortNub": 205,
"customType1": "",
"customType2": "",
"animation": null,
"dbclickEvents": null,
"BindDevId": null,
"BindDevName": null,
"devInfo": null,
"BindMeteId": null,
"BindMeteName": null
}, {
"show": true,
"uuid": "",
"name": "flowtube_206",
"objType": "flowTube",
"points": [{
"x": -20000,
"y": 0,
"z": -4000
}, {
"x": 7000,
"y": 0,
"z": 1800
}, {
"x": 15000,
"y": 0,
"z": 4500
}, {
"x": 16400,
"y": -50,
"z": 8000
}],
"position": {
"x": 7449.645,
"y": -296.122,
"z": -13354.89
},
"scale": {
"x": 1,
"y": 0.5,
"z": 1
},
"rotation": [{
"direction": "x",
"degree": 3.141592653589793
}, {
"direction": "y",
"degree": -1.5235153573583702
}, {
"direction": "z",
"degree": 3.141592653589793
}],
"style": {
"skinColor": 16772846,
"imgurl": "../../img/3dImg/right1.png",
"opacity": 1,
"canvasSkin": {
"cwidth": 1024,
"cheight": 128,
"cwNub": 8,
"chNub": 4,
"cMarginW": 0.2,
"cMarginH": 0.2,
"speed": 8,
"fps": 40,
"direction": "w",
"forward": "f",
"side": 2,
"run": true,
"bgcolor": "rgba(255, 136, 0, 0.27)"
}
},
"segments": 64,
"radialSegments": 4,
"closed": false,
"radius": 50,
"showSortNub": 205,
"customType1": "",
"customType2": "",
"animation": null,
"dbclickEvents": null,
"BindDevId": null,
"BindDevName": null,
"devInfo": null,
"BindMeteId": null,
"BindMeteName": null
}

 2.2.4、然后就来添加周遭的环境建筑，环境建筑主要从之前的建筑库里面复制粘贴一些即可。主要用于氛围渲染。

远处的建筑环境 随机添加一些即可

近处的适当模拟即可

  1. {"show":true,"uuid":"","name":"m2_b1_11","objType":"Lathe","position":{"x":-11580.514,"y":-306.711,"z":10361.44},"points":[{"x":500,"y":0,"z":0},{"x":500,"y":2550,"z":0},{"x":0,"y":2550,"z":0}],"style":{"skinColor":16777215,"imgurl":"../../img/3dImg/bf.png","repeatx":true,"width":1,"repeaty":true,"height":2,"side":2,"opacity":0.5},"segments":2,"radialSegments":6,"closed":true,"phiStart":0,"phiLength":6.283185307179586,"showSortNub":179,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0.7853981633974483},{"direction":"z","degree":0}],"radius":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"m2_b1_21","objType":"Lathe","position":{"x":-14535.849,"y":-306.711,"z":8464.547},"points":[{"x":500,"y":0,"z":0},{"x":500,"y":550,"z":0},{"x":0,"y":550,"z":0}],"style":{"skinColor":16777215,"imgurl":"../../img/3dImg/bf.png","repeatx":true,"width":1,"repeaty":true,"height":2,"side":2,"opacity":0.5},"segments":2,"radialSegments":4,"closed":true,"phiStart":0,"phiLength":6.283185307179586,"showSortNub":179,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0.7853981633974483},{"direction":"z","degree":0}],"radius":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"m2_b1_7","objType":"Lathe","position":{"x":-16520.655,"y":-306.711,"z":7396.858},"points":[{"x":500,"y":0,"z":0},{"x":500,"y":1050,"z":0},{"x":0,"y":1050,"z":0}],"style":{"skinColor":16777215,"imgurl":"../../img/3dImg/bf.png","repeatx":true,"width":1,"repeaty":true,"height":2,"side":2,"opacity":0.5},"segments":2,"radialSegments":4,"closed":true,"phiStart":0,"phiLength":6.283185307179586,"showSortNub":179,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0.7853981633974483},{"direction":"z","degree":0}],"radius":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"m2_b1_9","objType":"Lathe","position":{"x":-6593.336,"y":-306.711,"z":5417.177},"points":[{"x":500,"y":0,"z":0},{"x":500,"y":2550,"z":0},{"x":0,"y":2550,"z":0}],"style":{"skinColor":16777215,"imgurl":"../../img/3dImg/bf.png","repeatx":true,"width":1,"repeaty":true,"height":2,"side":2,"opacity":0.5},"segments":2,"radialSegments":4,"closed":true,"phiStart":0,"phiLength":6.283185307179586,"showSortNub":179,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0.7853981633974483},{"direction":"z","degree":0}],"radius":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"m2_b1_14","objType":"Lathe","position":{"x":-15332.962,"y":-306.711,"z":-11370.937},"points":[{"x":500,"y":0,"z":0},{"x":500,"y":3550,"z":0},{"x":0,"y":2550,"z":0}],"style":{"skinColor":16777215,"imgurl":"../../img/3dImg/bf.png","repeatx":true,"width":1,"repeaty":true,"height":2,"side":2,"opacity":0.5},"segments":2,"radialSegments":6,"closed":true,"phiStart":0,"phiLength":6.283185307179586,"showSortNub":179,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0.7853981633974483},{"direction":"z","degree":0}],"radius":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"m2_b1_13","objType":"Lathe","position":{"x":-22931.903,"y":-306.711,"z":-25758.894},"points":[{"x":500,"y":0,"z":0},{"x":500,"y":5550,"z":0},{"x":0,"y":7550,"z":0}],"style":{"skinColor":16777215,"imgurl":"../../img/3dImg/bf.png","repeatx":true,"width":1,"repeaty":true,"height":2,"side":2,"opacity":0.5},"segments":2,"radialSegments":6,"closed":true,"phiStart":0,"phiLength":6.283185307179586,"showSortNub":179,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0.7853981633974483},{"direction":"z","degree":0}],"radius":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"m2_b1_12","objType":"Lathe","position":{"x":-22931.903,"y":-306.711,"z":-4241.635},"points":[{"x":500,"y":0,"z":0},{"x":500,"y":3550,"z":0},{"x":0,"y":4050,"z":0}],"style":{"skinColor":16777215,"imgurl":"../../img/3dImg/bf.png","repeatx":true,"width":1,"repeaty":true,"height":2,"side":2,"opacity":0.5},"segments":2,"radialSegments":6,"closed":true,"phiStart":0,"phiLength":6.283185307179586,"showSortNub":179,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0.7853981633974483},{"direction":"z","degree":0}],"radius":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"m2_b1_5","objType":"Lathe","position":{"x":-10607.363,"y":-306.711,"z":790.995},"points":[{"x":500,"y":0,"z":0},{"x":500,"y":1550,"z":0},{"x":0,"y":1550,"z":0}],"style":{"skinColor":16777215,"imgurl":"../../img/3dImg/bf.png","repeatx":true,"width":1,"repeaty":true,"height":2,"side":2,"opacity":0.5},"segments":2,"radialSegments":4,"closed":true,"phiStart":0,"phiLength":6.283185307179586,"showSortNub":179,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0.7853981633974483},{"direction":"z","degree":0}],"radius":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"m2_b1_1","objType":"ExtrudeGeometry","position":{"x":-26610.811,"y":-225,"z":-1263.09},"style":{"skinColor":16777215,"imgurl":"../../img/3dImg/bf.png","repeatx":true,"width":0.0001,"repeaty":true,"height":0.003,"opacity":1},"scale":{"x":1,"y":1,"z":1},"shapeParm":{"points":[{"x":0,"y":0,"type":"nomal"},{"x":400,"y":0,"type":"nomal"},{"x":400,"y":-1100,"type":"nomal"},{"x":0,"y":-1100,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":400,"curveSegments":2,"steps":2,"bevelEnabled":true,"bevelThickness":1,"bevelSize":1,"bevelSegments":2,"extrudePathPoints":[]},"showSortNub":1073,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":-1.5707963267948966},{"direction":"y","degree":0},{"direction":"z","degree":-1.1736990153811468}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"m2_b1_22","objType":"Lathe","position":{"x":-9625.705,"y":-306.711,"z":3570.015},"points":[{"x":500,"y":0,"z":0},{"x":500,"y":1550,"z":0},{"x":0,"y":1550,"z":0}],"style":{"skinColor":16777215,"imgurl":"../../img/3dImg/bf.png","repeatx":true,"width":1,"repeaty":true,"height":2,"side":2,"opacity":0.5},"segments":2,"radialSegments":4,"closed":true,"phiStart":0,"phiLength":6.283185307179586,"showSortNub":179,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0.7853981633974483},{"direction":"z","degree":0}],"radius":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"m2_b1_2","objType":"Lathe","position":{"x":-9724.63,"y":-306.711,"z":-12051.028},"points":[{"x":500,"y":0,"z":0},{"x":500,"y":550,"z":0},{"x":0,"y":550,"z":0}],"style":{"skinColor":16777215,"imgurl":"../../img/3dImg/bf.png","repeatx":true,"width":1,"repeaty":true,"height":2,"side":2,"opacity":0.5},"segments":2,"radialSegments":4,"closed":true,"phiStart":0,"phiLength":6.283185307179586,"showSortNub":179,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0.7853981633974483},{"direction":"z","degree":0}],"radius":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"m2_b1_10","objType":"Lathe","position":{"x":-5560.232,"y":-306.711,"z":5417.177},"points":[{"x":500,"y":0,"z":0},{"x":500,"y":550,"z":0},{"x":0,"y":550,"z":0}],"style":{"skinColor":16777215,"imgurl":"../../img/3dImg/bf.png","repeatx":true,"width":1,"repeaty":true,"height":2,"side":2,"opacity":0.5},"segments":2,"radialSegments":4,"closed":true,"phiStart":0,"phiLength":6.283185307179586,"showSortNub":179,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0.7853981633974483},{"direction":"z","degree":0}],"radius":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"m2_b1_6","objType":"Lathe","position":{"x":-10839.157,"y":-306.711,"z":2181.829},"points":[{"x":500,"y":0,"z":0},{"x":500,"y":550,"z":0},{"x":0,"y":550,"z":0}],"style":{"skinColor":16777215,"imgurl":"../../img/3dImg/bf.png","repeatx":true,"width":1,"repeaty":true,"height":2,"side":2,"opacity":0.5},"segments":2,"radialSegments":4,"closed":true,"phiStart":0,"phiLength":6.283185307179586,"showSortNub":179,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0.7853981633974483},{"direction":"z","degree":0}],"radius":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"m2_b1_20","objType":"Lathe","position":{"x":-9724.63,"y":-306.711,"z":8464.547},"points":[{"x":500,"y":0,"z":0},{"x":500,"y":550,"z":0},{"x":0,"y":550,"z":0}],"style":{"skinColor":16777215,"imgurl":"../../img/3dImg/bf.png","repeatx":true,"width":1,"repeaty":true,"height":2,"side":2,"opacity":0.5},"segments":2,"radialSegments":4,"closed":true,"phiStart":0,"phiLength":6.283185307179586,"showSortNub":179,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0.7853981633974483},{"direction":"z","degree":0}],"radius":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"m2_b1_3","objType":"Lathe","position":{"x":-12576.856,"y":-306.711,"z":1577.352},"points":[{"x":500,"y":0,"z":0},{"x":500,"y":550,"z":0},{"x":0,"y":550,"z":0}],"style":{"skinColor":16777215,"imgurl":"../../img/3dImg/bf.png","repeatx":true,"width":1,"repeaty":true,"height":2,"side":2,"opacity":0.5},"segments":2,"radialSegments":4,"closed":true,"phiStart":0,"phiLength":6.283185307179586,"showSortNub":179,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0.7853981633974483},{"direction":"z","degree":0}],"radius":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"m2_b1_4","objType":"Lathe","position":{"x":-14899.259,"y":-306.711,"z":3899.755},"points":[{"x":500,"y":0,"z":0},{"x":500,"y":550,"z":0},{"x":0,"y":550,"z":0}],"style":{"skinColor":16777215,"imgurl":"../../img/3dImg/bf.png","repeatx":true,"width":1,"repeaty":true,"height":2,"side":2,"opacity":0.5},"segments":2,"radialSegments":4,"closed":true,"phiStart":0,"phiLength":6.283185307179586,"showSortNub":179,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0.7853981633974483},{"direction":"z","degree":0}],"radius":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"m_bb2_1_9","objType":"ExtrudeGeometry","position":{"x":6833.351,"y":-259.747,"z":-5299.004},"style":{"skinColor":15925247,"imgurl":"../../img/3dImg/greenHourse.png","repeatx":true,"width":0.001,"repeaty":true,"height":0.001,"opacity":0.3},"scale":{"x":0.85,"y":0.85,"z":1},"shapeParm":{"points":[{"x":0,"y":0,"type":"nomal"},{"x":1800,"y":0,"type":"nomal"},{"x":1800,"y":800,"type":"nomal"},{"x":1000,"y":800,"type":"nomal"},{"x":1000,"y":200,"type":"nomal"},{"x":0,"y":200,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":300,"curveSegments":4,"steps":4,"bevelEnabled":true,"bevelThickness":1,"bevelSize":1,"bevelSegments":2,"extrudePathPoints":[]},"showSortNub":1073,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0.10177014868378936},{"direction":"z","degree":0}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"m_bb2_1_5","objType":"ExtrudeGeometry","position":{"x":8234.442,"y":-310.474,"z":-3409.274},"style":{"skinColor":15925247,"imgurl":"../../img/3dImg/greenHourse.png","repeatx":true,"width":0.001,"repeaty":true,"height":0.001,"opacity":0.3},"scale":{"x":0.85,"y":0.85,"z":1},"shapeParm":{"points":[{"x":0,"y":0,"type":"nomal"},{"x":1800,"y":0,"type":"nomal"},{"x":1800,"y":-1300,"type":"nomal"},{"x":0,"y":-1300,"type":"nomal"},{"x":0,"y":-1000,"type":"nomal"},{"x":1400,"y":-1000,"type":"nomal"},{"x":1400,"y":-300,"type":"nomal"},{"x":0,"y":-300,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":800,"curveSegments":4,"steps":4,"bevelEnabled":true,"bevelThickness":1,"bevelSize":1,"bevelSegments":2,"extrudePathPoints":[]},"showSortNub":1073,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":-1.5707963267948966},{"direction":"y","degree":0},{"direction":"z","degree":-3.0476415799549383}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"m_bb2_1_8","objType":"ExtrudeGeometry","position":{"x":8087.394,"y":-310.474,"z":-3030.463},"style":{"skinColor":15925247,"imgurl":"../../img/3dImg/greenHourse.png","repeatx":true,"width":0.001,"repeaty":true,"height":0.001,"opacity":0.3},"scale":{"x":0.85,"y":0.85,"z":1},"shapeParm":{"points":[{"x":0,"y":0,"type":"nomal"},{"x":200,"y":0,"type":"nomal"},{"x":200,"y":-2500,"type":"nomal"},{"x":0,"y":-2500,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":600,"curveSegments":4,"steps":4,"bevelEnabled":true,"bevelThickness":1,"bevelSize":1,"bevelSegments":2,"extrudePathPoints":[]},"showSortNub":1073,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":-1.5707963267948966},{"direction":"y","degree":0},{"direction":"z","degree":-3.0476415799549383}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"m_bb2_1_15","objType":"ExtrudeGeometry","position":{"x":8302.592,"y":-310.474,"z":-3055.138},"style":{"skinColor":15925247,"imgurl":"../../img/3dImg/greenHourse.png","repeatx":true,"width":0.001,"repeaty":true,"height":0.001,"opacity":0.3},"scale":{"x":0.85,"y":0.85,"z":1},"shapeParm":{"points":[{"x":0,"y":0,"type":"nomal"},{"x":300,"y":0,"type":"nomal"},{"x":300,"y":-1500,"type":"nomal"},{"x":0,"y":-1500,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":600,"curveSegments":4,"steps":4,"bevelEnabled":true,"bevelThickness":1,"bevelSize":1,"bevelSegments":2,"extrudePathPoints":[]},"showSortNub":1073,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":-1.5707963267948966},{"direction":"y","degree":0},{"direction":"z","degree":-1.4566168871294274}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"m_bb2_1_19","objType":"ExtrudeGeometry","position":{"x":7285.208,"y":-310.474,"z":-2592.641},"style":{"skinColor":15925247,"imgurl":"../../img/3dImg/greenHourse.png","repeatx":true,"width":0.001,"repeaty":true,"height":0.001,"opacity":0.3},"scale":{"x":0.85,"y":0.85,"z":1},"shapeParm":{"points":[{"x":0,"y":0,"type":"nomal"},{"x":0,"y":0,"type":"absarc","radius":400,"startAngle":0,"endAngle":6.283185307179586,"Clockwise":true}],"holes":[]},"extrudeSettings":{"amount":200,"curveSegments":4,"steps":4,"bevelEnabled":true,"bevelThickness":1,"bevelSize":1,"bevelSegments":2,"extrudePathPoints":[]},"showSortNub":1073,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":-1.5707963267948966},{"direction":"y","degree":0},{"direction":"z","degree":-1.4566168871294274}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"m_bb2_1_14","objType":"ExtrudeGeometry","position":{"x":7814.065,"y":-259.747,"z":-1573.678},"style":{"skinColor":15925247,"imgurl":"../../img/3dImg/greenHourse.png","repeatx":true,"width":0.001,"repeaty":true,"height":0.001,"opacity":0.3},"scale":{"x":0.85,"y":0.85,"z":1},"shapeParm":{"points":[{"x":0,"y":0,"type":"nomal"},{"x":1800,"y":0,"type":"nomal"},{"x":1800,"y":800,"type":"nomal"},{"x":1000,"y":800,"type":"nomal"},{"x":1000,"y":200,"type":"nomal"},{"x":0,"y":200,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":300,"curveSegments":4,"steps":4,"bevelEnabled":true,"bevelThickness":1,"bevelSize":1,"bevelSegments":2,"extrudePathPoints":[]},"showSortNub":1073,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0.10177014868378936},{"direction":"z","degree":0}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"m_bb2_1_4","objType":"ExtrudeGeometry","position":{"x":11139.259,"y":-310.474,"z":-2323.74},"style":{"skinColor":9568200,"imgurl":"../../img/3dImg/floor1.jpg","repeatx":true,"width":0.01,"repeaty":true,"height":0.002,"opacity":0.5},"scale":{"x":0.85,"y":0.85,"z":1},"shapeParm":{"points":[{"x":200,"y":-500,"type":"nomal"},{"x":900,"y":-800,"type":"absarc","radius":600,"startAngle":-3.141592653589793,"endAngle":0,"Clockwise":true},{"x":1500,"y":-2000,"type":"nomal"},{"x":900,"y":-2200,"type":"absarc","radius":600,"startAngle":6.283185307179586,"endAngle":3.141592653589793,"Clockwise":true},{"x":300,"y":-2200,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":80,"curveSegments":4,"steps":4,"bevelEnabled":true,"bevelThickness":1,"bevelSize":1,"bevelSegments":2,"extrudePathPoints":[]},"showSortNub":1073,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":-1.5707963267948966},{"direction":"y","degree":0},{"direction":"z","degree":-3.0476415799549383}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"m_bb2_1_1","objType":"ExtrudeGeometry","position":{"x":9804.847,"y":-301.577,"z":1851.944},"style":{"skinColor":12447231,"imgurl":"../../img/3dImg/greenHourse.png","repeatx":true,"width":0.001,"repeaty":true,"height":0.001,"opacity":0.5},"scale":{"x":1,"y":1,"z":1},"shapeParm":{"points":[{"x":0,"y":0,"type":"nomal"},{"x":200,"y":0,"type":"nomal"},{"x":200,"y":-500,"type":"nomal"},{"x":900,"y":-800,"type":"absarc","radius":800,"startAngle":-3.141592653589793,"endAngle":0,"Clockwise":true},{"x":1700,"y":-2000,"type":"nomal"},{"x":900,"y":-2200,"type":"absarc","radius":800,"startAngle":6.283185307179586,"endAngle":3.141592653589793,"Clockwise":true},{"x":300,"y":-2200,"type":"nomal"},{"x":300,"y":-3000,"type":"nomal"},{"x":0,"y":-3000,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":40,"curveSegments":4,"steps":4,"bevelEnabled":true,"bevelThickness":1,"bevelSize":1,"bevelSegments":2,"extrudePathPoints":[]},"showSortNub":1073,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":-1.5707963267948966},{"direction":"y","degree":0},{"direction":"z","degree":-3.0476415799549383}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"m_bb2_1_2","objType":"ExtrudeGeometry","position":{"x":9799.866,"y":-310.474,"z":1851.944},"style":{"skinColor":9568200,"imgurl":"../../img/3dImg/floor1.jpg","repeatx":true,"width":0.01,"repeaty":true,"height":0.002,"opacity":0.5},"scale":{"x":1,"y":1,"z":1},"shapeParm":{"points":[{"x":200,"y":-500,"type":"nomal"},{"x":900,"y":-800,"type":"absarc","radius":600,"startAngle":-3.141592653589793,"endAngle":0,"Clockwise":true},{"x":1500,"y":-2000,"type":"nomal"},{"x":900,"y":-2200,"type":"absarc","radius":600,"startAngle":6.283185307179586,"endAngle":3.141592653589793,"Clockwise":true},{"x":300,"y":-2200,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":80,"curveSegments":4,"steps":4,"bevelEnabled":true,"bevelThickness":1,"bevelSize":1,"bevelSegments":2,"extrudePathPoints":[]},"showSortNub":1073,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":-1.5707963267948966},{"direction":"y","degree":0},{"direction":"z","degree":-3.0476415799549383}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"m_bb2_1_3","objType":"ExtrudeGeometry","position":{"x":11140.914,"y":-301.577,"z":-2390.805},"style":{"skinColor":12447231,"imgurl":"../../img/3dImg/greenHourse.png","repeatx":true,"width":0.01,"repeaty":true,"height":0.002,"opacity":0.5},"scale":{"x":0.85,"y":0.8,"z":0.85},"shapeParm":{"points":[{"x":0,"y":0,"type":"nomal"},{"x":200,"y":0,"type":"nomal"},{"x":200,"y":-500,"type":"nomal"},{"x":900,"y":-800,"type":"absarc","radius":800,"startAngle":-3.141592653589793,"endAngle":0,"Clockwise":true},{"x":1700,"y":-2000,"type":"nomal"},{"x":900,"y":-2200,"type":"absarc","radius":800,"startAngle":6.283185307179586,"endAngle":3.141592653589793,"Clockwise":true},{"x":300,"y":-2200,"type":"nomal"},{"x":300,"y":-3000,"type":"nomal"},{"x":0,"y":-3000,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":40,"curveSegments":4,"steps":4,"bevelEnabled":true,"bevelThickness":1,"bevelSize":1,"bevelSegments":2,"extrudePathPoints":[]},"showSortNub":1073,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":-1.5707963267948966},{"direction":"y","degree":0},{"direction":"z","degree":-3.0476415799549383}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"m_bb2_1_7","objType":"ExtrudeGeometry","position":{"x":11094.543,"y":-310.474,"z":-1183.396},"style":{"skinColor":15925247,"imgurl":"../../img/3dImg/greenHourse.png","repeatx":true,"width":0.001,"repeaty":true,"height":0.001,"opacity":0.3},"scale":{"x":0.85,"y":0.85,"z":1},"shapeParm":{"points":[{"x":0,"y":0,"type":"nomal"},{"x":1800,"y":0,"type":"nomal"},{"x":1800,"y":-1300,"type":"nomal"},{"x":0,"y":-1300,"type":"nomal"},{"x":0,"y":-1000,"type":"nomal"},{"x":1400,"y":-1000,"type":"nomal"},{"x":1400,"y":-300,"type":"nomal"},{"x":0,"y":-300,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":800,"curveSegments":4,"steps":4,"bevelEnabled":true,"bevelThickness":1,"bevelSize":1,"bevelSegments":2,"extrudePathPoints":[]},"showSortNub":1073,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":-1.5707963267948966},{"direction":"y","degree":0},{"direction":"z","degree":-3.0476415799549383}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"m_bb2_1_6","objType":"ExtrudeGeometry","position":{"x":11902.351,"y":-310.474,"z":895.952},"style":{"skinColor":15925247,"imgurl":"../../img/3dImg/greenHourse.png","repeatx":true,"width":0.001,"repeaty":true,"height":0.001,"opacity":0.3},"scale":{"x":0.85,"y":0.85,"z":1},"shapeParm":{"points":[{"x":0,"y":0,"type":"nomal"},{"x":1800,"y":0,"type":"nomal"},{"x":1800,"y":-1300,"type":"nomal"},{"x":0,"y":-1300,"type":"nomal"},{"x":0,"y":-1000,"type":"nomal"},{"x":1400,"y":-1000,"type":"nomal"},{"x":1400,"y":-300,"type":"nomal"},{"x":0,"y":-300,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":800,"curveSegments":4,"steps":4,"bevelEnabled":true,"bevelThickness":1,"bevelSize":1,"bevelSegments":2,"extrudePathPoints":[]},"showSortNub":1073,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":-1.5707963267948966},{"direction":"y","degree":0},{"direction":"z","degree":-3.0476415799549383}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"m_bb2_1_11","objType":"ExtrudeGeometry","position":{"x":11719.141,"y":-310.474,"z":1232.674},"style":{"skinColor":15925247,"imgurl":"../../img/3dImg/greenHourse.png","repeatx":true,"width":0.001,"repeaty":true,"height":0.001,"opacity":0.3},"scale":{"x":0.85,"y":0.85,"z":1},"shapeParm":{"points":[{"x":0,"y":0,"type":"nomal"},{"x":200,"y":0,"type":"nomal"},{"x":200,"y":-2500,"type":"nomal"},{"x":0,"y":-2500,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":600,"curveSegments":4,"steps":4,"bevelEnabled":true,"bevelThickness":1,"bevelSize":1,"bevelSegments":2,"extrudePathPoints":[]},"showSortNub":1073,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":-1.5707963267948966},{"direction":"y","degree":0},{"direction":"z","degree":-3.0476415799549383}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null},{"show":true,"uuid":"","name":"m_bb2_1_20","objType":"ExtrudeGeometry","position":{"x":11897.751,"y":-310.474,"z":1209.998},"style":{"skinColor":15925247,"imgurl":"../../img/3dImg/greenHourse.png","repeatx":true,"width":0.001,"repeaty":true,"height":0.001,"opacity":0.3},"scale":{"x":0.85,"y":0.85,"z":1},"shapeParm":{"points":[{"x":0,"y":0,"type":"nomal"},{"x":300,"y":0,"type":"nomal"},{"x":300,"y":-1500,"type":"nomal"},{"x":0,"y":-1500,"type":"nomal"}],"holes":[]},"extrudeSettings":{"amount":600,"curveSegments":4,"steps":4,"bevelEnabled":true,"bevelThickness":1,"bevelSize":1,"bevelSegments":2,"extrudePathPoints":[]},"showSortNub":1073,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":-1.5707963267948966},{"direction":"y","degree":0},{"direction":"z","degree":-1.4566168871294274}],"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null}
View Code

 三、效果截图展示。上面是gif录屏。有些失真。下面截一些效果图展示

 四、主页面HTML代码：

  1. <!DOCTYPE html>
  2. <html style="padding:0px;margin:0px;">
  3. <head>
  4.     <style>
  5.         body {
  6.             /*background: linear-gradient(to top right, #000000 0%, #001925 60%, #003a73 100%);*/
  7.             padding: 0px;
  8.             margin: 0px;
  9.             background: url(../img/bg2.jpg) center center/100% 100% no-repeat fixed;
  10.             background-size: 100% 100%;
  11.         }
  13.         #toolbar {
  14.             display: none;
  15.         }
  17.         .canvas_frame {
  18.             border: none;
  19.             cursor: pointer;
  20.             width: 100%;
  21.             height: 100%;
  22.             background-color: rgba(0, 0, 0, 0);
  23.             overflow: hidden;
  24.         }
  26.         .toolbar {
  27.             display: block;
  28.             position: absolute;
  29.             left: 10px;
  30.             top: 75px;
  31.             width: 32px;
  32.             height: auto;
  33.             background: rgba(73, 178, 195, 0.34902);
  34.             border-radius: 5px;
  35.             padding: 5px;
  36.         }
  38.             .toolbar img {
  39.                 float: left;
  40.                 margin: 5px;
  41.                 width: 24px;
  42.                 height: 24px;
  43.                 pointer-events: auto;
  44.                 cursor: pointer;
  45.             }
  47.         .Stats_output {
  48.             display: block;
  49.             position: absolute;
  50.             border-radius: 5px;
  51.             padding: 5px;
  52.         }
  54.         #canvas-frame > canvas {
  55.             border-top-left-radius: 7px;
  56.             border-bottom-right-radius: 7px;
  57.             border-top-right-radius: 7px;
  58.             border-bottom-left-radius: 7px;
  59.         }
  61.         .WT3dShowBoxClass {
  62.             box-shadow: inset 0px 0px 18px rgb(204, 234, 255) !important;
  63.             background: rgba(3, 62, 84, 0.75) !important;
  64.             -moz-border-radius: 5px !important;
  65.             -webkit-border-radius: 5px !important;
  66.             border: 1px solid #fff !important;
  67.             color: white !important;
  68.         }
  70.             .WT3dShowBoxClass .layui-layer-title {
  71.                 background: rgba(255, 255, 255, 0) !important;
  72.                 border-bottom: 1px solid rgba(238, 238, 238, 0.12) !important;
  73.                 color: white !important;
  74.             }
  76.             .WT3dShowBoxClass .layui-layer-setwin .layui-layer-ico.layui-layer-close.layui-layer-close1 {
  77.                 background: url(/css/layer/skin/default/close_16.png) no-repeat !important;
  78.             }
  80.         .table {
  81.             width: 100%;
  82.         }
  84.             .table th {
  85.                 text-align: center;
  86.                 background-color: rgba(0,0,0,0.1);
  87.                 line-height: 30px;
  88.                 font-size: 18px;
  89.             }
  91.             .table td {
  92.                 text-align: center;
  93.                 line-height: 32px;
  94.                 font-size: 18px;
  95.             }
  97.         .layui-layer {
  98.             background: rgba(16, 40, 104, 0.9) !important;
  99.             box-shadow: none !important;
  100.         }
  102.         .cabDetail {
  103.             color: #00edfb;
  104.         }
  106.         .layui-layer-title {
  107.             padding: 0 80px 0 20px;
  108.             height: 42px;
  109.             line-height: 42px;
  110.             border-bottom: 1px solid #0096ff !important;
  111.             font-size: 22px !important;
  112.             color: #acfaff !important;
  113.             overflow: hidden;
  114.             background-color: rgba(17, 79, 152, 0.6) !important;
  115.             border-radius: 2px 2px 0 0;
  116.         }
  117.         .layui-layer-content {
  118.         color:white;
  119.         }
  120.     </style>
  121.     <title></title>
  122.     <meta charset="utf-8" />
  123.  
  124.     <link href="/css/iconfont.css" rel="stylesheet" />
  125.     <link href="../plugs/layer/layui/css/layui.css" rel="stylesheet" />
  126.     <link href="../css/animate.css" rel="stylesheet" />
  127.     <link href="../css/stylesnew.css" rel="stylesheet" />
  128.     <link href="../plugs/jquery.mCustomScrollbar.css" rel="stylesheet" />
  129.     <script src="../plugs/jquery-2.2.2.js"></script>
  130.     <script src="../plugs/jquery.mCustomScrollbar.js"></script>
  131.     <script src="../plugs/layer/layer.js"></script>
  132.     <script src="../plugs/layer/laydate/laydate.js"></script>
  133.     <script src="../plugs/layer/layui/layui.js"></script>
  134.     <script src="../js/commonFunction.js"></script>
  135.     <script src="../js/h5Player/h5Video.js"></script>
  136.     <script src="../plugs/three/Three.min.js"></script>
  137.     <script src="../plugs/three/html2canvas.min.js"></script>
  138.     <script src="../plugs/three/Detector.js"></script>
  139.     <script src="../plugs/three/OrbitControls.js"></script>
  140.     <script src="../plugs/three/TransformControls.js"></script>
  141.     <script src="../plugs/three/stats.min.js"></script>
  142.     <script src="../js/indexnew.js"></script>
  143.     <script src="../js/models/build.js"></script>
  144.     <script src="../js/modelBusiness.js"></script>
  145.     <script src="../js/initPage.js"></script>
  146.     <script src="../plugs/jquery.singalr.js"></script>
  147.     <script src="../plugs/echarts.min.js"></script>
  148. </head>
  149.  
  150.  
  151. <body id="mainBody" onload="threeStart(0);" style="padding:0px;margin:0px;">
  152.     <script>
  153.         if (!Detector.webgl) {
  154.             layer.alert("您的浏览器不支持3D功能,请使用支持WebGL的浏览器（例如：chrome浏览器、ie11以上浏览器等）");
  155.         }
  156.     </script>
  157.  
  158.     <div class="headerbg">
  159.         <h2 id="indexHead" style="text-align:center;width:600px;height:70px ;margin: auto;
  160.     position: absolute;
  161.     top: 0;
  162.     left: 0;letter-spacing: 8px;
  163.     bottom: 0;line-height: 70px;
  164.     right: 0;cursor:pointer;">
  165.             园区三维综合展示平台
  166.         </h2>
  167.         <div class="datebox">
  168.             <img src="../img/icon-time.png" class="icontime" />
  169.             <p class="timeP" id="timeP">2019.03.26 14:30</p>
  170.         </div>
  171.         <div class="dutylist">
  172.             <img src="../img/icon-person.png" class="iconperson" title="点击换肤" alt="点击换肤" style="cursor:pointer;" id="personClick"/>
  173.             <span>登录用户名：</span>
  174.             <ul id="list_scroll" class="list_scroll">
  175.                 <li>admin&nbsp;&nbsp;&nbsp;&nbsp;退出</li>
  176.             </ul>
  177.         </div>
  178.     </div>
  179.  
  180.     
  181.     <div id="dataCanvasList" style="position:absolute;z-index:-1;display:none;width:5px;height:5px;overflow:auto;"><div style="width:10px;height:10px;float:left;position:relative;"></div></div>
  182.     <div id="canvas-frame" class="canvas_frame"></div>
  183.     <div class="staticDivBg" style="left:10px;top:80px;">
  184.         <div class="staticContent" style="width:400px;height:260px;margin:12px;margin-left:20px;margin-right:20px; ">
  185.             <div class="staticTitle">
  186.                 智慧园区-基础信息
  187.             </div>
  188.             <div id="infoData01" class="staticDataContent" style="height:220px;">
  189.  
  190.             </div>
  191.         </div>
  192.     </div>
  193.     <div class="staticDivBg" style="left:10px;top:400px;">
  194.         <div class="staticContent" style="width:400px;height:260px;margin:12px;margin-left:20px;margin-right:20px; ">
  195.             <div class="staticTitle">
  196.                 智慧安防-远程监控
  197.             </div>
  198.             <div id="infoData02" class="staticDataContent" style="height:200px;">
  199.             </div>
  200.         </div>
  201.     </div>
  202.  
  203.     <div class="staticDivBg" style="left:10px;bottom:40px;">
  204.         <div class="staticContent" style="width:700px;height:200px;margin:12px;margin-left:30px;margin-right:22px; ">
  205.             <div class="staticTitle" style="width:40%;margin-left:6%;">
  206.                 智慧供电-能耗统计
  207.             </div>
  208.             <div id="infoData03" class="staticDataContent" style="float:left;height:180px;width:70%">
  209.  
  210.             </div>
  211.             <div id="infoData03_1" class="staticDataContent" style="float:left;height:180px;width:29%">
  212.                 非法闯入告警
  213.             </div>
  214.         </div>
  215.     </div>
  216.     <div class="staticDivBg" style="right:10px;bottom:10px;">
  217.         <div class="staticContent" style="width:800px;height:240px;margin:12px;margin-left:40px;margin-right:30px; ">
  218.             <div class="staticTitle" style="width:30%;margin-left:8%;">
  219.                 智慧安防-人员抓拍
  220.             </div>
  221.             <div class="subTitle" >
  222.                 识别抓拍
  223.                 <span>0</span>
  224.                 <span>0</span>
  225.                 <span>8</span>
  226.                 <span>1</span>
  227.                 个
  228.             </div>
  229.             <div id="infoData06" class="staticDataContent" style="height:180px;width:70%">
  230.                 <table>
  231.                     <tr><td style="width:220px;padding:10px;">
  232.                         <img src="../img/data/zp1.png" style="width:175px;height:150px;" /></td>
  233.                         <td style="width:220px;padding:10px;"><img src="../img/data/zp2.png" style="width:175px;height:150px;" /></td>
  234.                         <td style="width:220px;padding:10px;"><img src="../img/data/zp3.png" style="width:175px;height:150px;" /></td>
  235.                         <td  style="width:220px;padding:10px;"><img src="../img/data/zp4.gif" style="width:175px;height:150px;" /></td>
  236.                       </tr>
  237.                     <tr><td style="text-align:center;color:#ff9128;font-size:16px;">1128抓拍-可疑人物</td>
  238.                         <td  style="text-align:center;color:#ff9128;font-size:16px;">0856抓拍-可疑人物</td>
  239.                         <td  style="text-align:center;color:#ff9128;font-size:16px;">2442抓拍-可疑人物</td>
  240.                         <td style="text-align:center;color:#ff3300;font-size:16px;">0453抓拍-可疑尾随</td></tr>
  241.                 </table>
  242.             </div>
  243.         </div>
  244.     </div>
  245.     <div class="staticDivBg" style="right:10px;top:80px;">
  246.         <div class="staticContent" style="width:400px;height:560px;margin:25px;margin-left:20px;margin-right:20px; ">
  247.             <div class="staticTitle">
  248.                 智能设备-设备运维
  249.             </div>
  250.             <div id="infoData05" class="staticDataContent" style="height:520px;">
  251.                 <div>
  252.                 </div>
  253.             </div>
  254.         </div>
  255.     </div>
  256.  
  257.  
  258.     <div id="dengganTitle" class='devInfo dleft'>
  259.         </br>1</br>号</br>楼
  260.     </div>
  261.  
  262.     <div id="video1" class='devInfo dleft'>
  263.         <video autoplay loop style="width:290px;height:190px;margin:5px;background:black;">
  264.             <source src="../img/video/v2.mp4" type="video/mp4" />
  265.         </video>
  266.        
  267.     </div>
  268.  
  269.     <div id="wbjcy" class='devInfo dleft'>
  270.         <table>
  271.             <tr><td colspan="4" class="title">微波检测仪</td></tr>
  272.             <tr><td class="tdKey" style="width:80px;">状态:</td><td class="tdvalue">在线</td>
  273.                 <td class="tdKey" style="width:80px;">工作状态:</td><td class="tdvalue">运行中</td></tr>
  274.             <tr><td class="tdKey">信号强度:</td><td class="tdvalue">强</td><td class="tdKey">供电电压:</td><td class="tdvalue">在线</td></tr>
  275.             <tr><td class="tdKey">运行电流:</td><td class="tdvalue">在线</td><td class="tdKey">车道占用率</td><td class="tdvalue">57%</td></tr>
  276.             <tr><td class="tdKey">交通流量:</td><td class="tdvalue">158</td><td class="tdKey">平均车速</td><td class="tdvalue">46KM/h</td></tr>
  277.         </table>
  278.     </div>
  279.     <div id="daping" class='devInfo dleft'>
  280.         <table>
  281.             <tr><td colspan="4" class="title">大屏设备</td></tr>
  282.             <tr><td class="tdKey">状态:</td><td class="tdvalue">在线</td><td class="tdKey">工作状态:</td><td class="tdvalue">播放中</td></tr>
  283.             <tr><td class="tdKey">温度:</td><td class="tdvalue">37℃</td><td class="tdKey">供电电压:</td><td class="tdvalue">220V</td></tr>
  284.             <tr><td class="tdKey">运行电流:</td><td class="tdvalue">2.5A</td><td class="tdKey">状态:</td><td class="tdvalue">在线</td></tr>
  285.             <tr><td class="tdKey">运行时间:</td><td class="tdvalue">56分钟</td><td class="tdKey">运行状态:</td><td class="tdvalue">正常</td></tr>
  286.         </table>
  287.     </div>
  288.  
  289.     <div id="yjbj" class='devInfo dleft'>
  290.         <table>
  291.             <tr><td colspan="4" class="title">一键报警</td></tr>
  292.             <tr><td class="tdKey">设备状态:</td><td class="tdvalue">在线</td><td class="tdKey">工作状态:</td><td class="tdvalue">待机</td></tr>
  293.             <tr><td class="tdKey">信号强度:</td><td class="tdvalue">强</td><td class="tdKey">供电电压:</td><td class="tdvalue">12V</td></tr>
  294.             <tr><td class="tdKey">运行电流:</td><td class="tdvalue">1.5A</td><td class="tdKey">使用次数:</td><td class="tdvalue">0</td></tr>
  295.             <tr><td class="tdKey">链路公安:</td><td class="tdvalue" colspan="3">南山西丽二分局报警系统</td></tr>
  296.        </table>
  297.     </div>
  298.  
  299.     <div id="wifi" class='devInfo'>
  300.         <table>
  301.             <tr><td colspan="4" class="title">5G基站&WIFI</td></tr>
  302.             <tr><td class="tdKey" >设备状态:</td><td class="tdvalue">在线</td><td class="tdKey">工作状态:</td><td class="tdvalue">运行中</td></tr>
  303.             <tr><td class="tdKey">上行:</td><td class="tdvalue">848KB</td><td class="tdKey">下行:</td><td class="tdvalue">1546MB</td></tr>
  304.             <tr><td class="tdKey">人均带宽:</td><td class="tdvalue">128MB</td><td class="tdKey"></td><td class="tdvalue"></td></tr>
  305.         </table>
  306.     </div>
  307.     <div id="hj" class='devInfo'>
  308.         <table>
  309.             <tr><td colspan="4" class="title">环境设备</td></tr>
  310.             <tr><td class="tdKey" style="width:60px;">状态:</td><td class="tdvalue">在线</td>
  311.                 <td class="tdKey" style="width:60px;">工作状态:</td><td class="tdvalue">采集中</td></tr>
  312.             <tr><td class="tdKey">空气质量:</td><td class="tdvalue">优</td><td class="tdKey">噪音:</td><td class="tdvalue">68分贝</td></tr>
  313.             <tr><td class="tdKey">温湿度:</td><td class="tdvalue">26℃/75%</td><td class="tdKey">风向风速:</td><td class="tdvalue">东南三级</td></tr>
  314.             <tr><td class="tdKey">PM2.5:</td><td class="tdvalue">34</td><td class="tdKey">扬尘:</td><td class="tdvalue">无</td></tr>
  315.         </table>
  316.     </div>
  317.     <div id="video2" class='devInfo'>
  318.         <video autoplay loop style="width:290px;height:190px;margin:5px;background:black;">
  319.             <source src="../img/video/v1.mp4" type="video/mp4" />
  320.         </video>
  321.     </div>
  322.     <div id="cdz" class='devInfo'>
  323.         <table>
  324.             <tr><td colspan="4" class="title">充电桩</td></tr>
  325.             <tr><td class="tdKey">设备状态:</td><td class="tdvalue">在线</td><td class="tdKey">工作状态:</td><td class="tdvalue">闲置</td></tr>
  326.             <tr><td class="tdKey">供电电压:</td><td class="tdvalue">220V</td><td class="tdKey"> 运行电流:</td><td class="tdvalue">1.5A</td></tr>
  327.         </table>
  328.     </div>
  329.     <div id="fsu" class='devInfo'>
  330.         <table>
  331.             <tr><td colspan="6" class="title">网关设备</td></tr>
  332.             <tr><td class="tdKey" >状态:</td><td class="tdvalue">在线</td>
  333.                 <td class="tdKey">通讯方式:</td><td class="tdvalue">TCP/IP</td>
  334.                 <td class="tdKey"></td><td class="tdvalue"></td></tr>
  335.             <tr>
  336.                 <td class="tdKey">CPU:</td>
  337.                 <td class="tdvalue">46.5%</td>
  338.                 <td class="tdKey">CPU温度:</td>
  339.                 <td class="tdvalue">59.3℃</td>
  340.                 <td class="tdKey">内存:</td>
  341.                 <td class="tdvalue">51%</td>
  342.             </tr>
  343.             <tr>
  344.                 <td class="tdKey">输入电压:</td>
  345.                 <td class="tdvalue">220V</td>
  346.                 <td class="tdKey">功率:</td>
  347.                 <td class="tdvalue">26KW</td>
  348.                 <td class="tdKey">厂家:</td>
  349.                 <td class="tdvalue">麦斯杰</td>
  350.             </tr>
  351.             <tr><td colspan="6" class="title">&nbsp;</td></tr>
  352.             <tr><td colspan="6" class="title">智慧照明</td></tr>
  353.             <tr>
  354.                 <td class="tdKey">电压:</td>
  355.                 <td class="tdvalue">380V</td>
  356.                 <td class="tdKey">电流:</td>
  357.                 <td class="tdvalue">2.5A</td>
  358.                 <td class="tdKey">故障率:</td>
  359.                 <td class="tdvalue">0.01%</td>
  360.             </tr>
  361.         </table>
  362.     </div>
  363.    <script>
  364.         $(document).ready(function () {
  365.             showLoading(getBuildData().length, null, function () {
  366.            
  367.             });
  368.         });
  369.     </script>
  370. </body>
  371.  
  372.  
  373. </html>

 主页面数据逻辑代码

  1. $(function () {
  2.     var scroll_area = $('#list_scroll');
  3.     function scrolllist() {
  4.         var timespan = 3000,
  5.             timer;
  6.         scroll_area.hover(function () {
  7.             clearInterval(timer);
  8.         }, function () {
  9.             timer = setInterval(function () {
  10.                 var moveline = scroll_area.find('li:first');
  11.                 var lineheight = 44;
  12.                 moveline.animate({
  13.                     marginTop: -lineheight + 'px'
  14.                 }, 600, function () {
  15.                     moveline.css('marginTop', 0).appendTo(scroll_area);
  16.                 });
  17.             }, timespan);
  18.         }).trigger('mouseleave');
  19.     }
  20.     if (scroll_area.find('li').length > 1) {
  21.         scrolllist();
  22.     }
  24.     //系统时间
  25.     var otimeP = document.getElementById('timeP');
  26.     setInterval(fnTime, 1000);
  27.     fnTime();
  28.     function fnTime() {
  29.         var myTime = new Date();
  30.         var iYear = myTime.getFullYear();
  31.         var iMonth = myTime.getMonth() + 1;
  32.         var iDate = myTime.getDate();
  33.         var iHours = myTime.getHours();
  34.         var iMin = myTime.getMinutes();
  35.         var iSec = myTime.getSeconds();
  36.         var str = '';
  37.         str = iYear + '.' + toTwo(iMonth) + '.' + toTwo(iDate) + ' ' + toTwo(iHours) + ' : ' + toTwo(iMin) + ' : ' + toTwo(iSec);
  38.         otimeP.innerHTML = str;
  39.     }
  40.     function toTwo(n) {
  41.         return n < 10 ? '0' + n : '' + n;
  42.     }
  43.     indexPage = new IndexPage();
  44.     indexPage.init();
  45.     for (var i = 1; i <= 6; i++) {
  46.         if (window["System0" + i]) {
  47.             window["system0" + i] = new window["System0" + i]();
  48.             window["system0" + i].init();
  49.         }
  50.     }
  51. });
  52. function IndexPage() {
  53.     this.init();
  54. };
  55. IndexPage.prototype.init = function () {
  56.     this.info01();
  57.     this.info02();
  58.     this.info03();
  59.     this.info0301();
  60.     this.infoRight05();
  61. }
  62. //事件绑定
  63. IndexPage.prototype.bindEvents = function () {
  67. }
  68. //显示统计信息
  69. IndexPage.prototype.showStaticInfos = function () {
  70.     
  71. }
  72. //左上
  73. IndexPage.prototype.info01 = function () {
  74.     var myChart = echarts.init(document.getElementById("infoData01"));
  75.     var option = {
  76.         "normal": {
  77.             "top": 200,
  78.             "left": 300,
  79.             "width": 500,
  80.             "height": 400,
  81.             "zIndex": 6,
  82.             "backgroundColor": ""
  83.         },
  84.         "color": ["rgba(245, 166, 35, 1)", "rgba(19, 173, 255, 1)"],
  85.         "tooltip": {
  86.             "show": true,
  87.             "trigger": "item"
  88.         },
  89.         "legend": {
  90.             "show": true,
  91.             "icon": "circle",
  92.             "left": "43%",
  93.             "top": "90%",
  94.             "orient": "horizontal",
  95.             "textStyle": {
  96.                 "fontSize": 12,
  97.                 "color": "#fff"
  98.             },
  99.             "data": ["正常指标", "实际指标"]
  100.         },
  101.         "radar": {
  102.             "center": ["50%", "45%"],
  103.             "radius": "70%",
  104.             "startAngle": 90,
  105.             "splitNumber": 4,
  106.             "shape": "polygon",
  107.             name: {
  108.                 textStyle: {
  109.                     color: '#fff',
  110.                     fontSize: 12
  111.                 }
  112.             },
  113.             splitArea: {
  114.                 show: true,
  115.                 areaStyle: {
  116.                     color: '#0d6dba',
  117.                     opacity: 0.1
  118.                 }
  119.             },
  120.             "axisLabel": {
  121.                 "show": false,
  122.                 "fontSize": 12,
  123.                 "color": "#fff",
  124.                 "fontWeight": "normal"
  125.             },
  126.             axisLine: {
  127.                 show: true,
  128.                 lineStyle: {
  129.                     color: '#4f8bbe',
  130.                     opacity: 1
  131.                 }
  132.             },
  133.             splitLine: {
  135.                 lineStyle: {
  136.                     color: '#4f8bbe',
  137.                     opacity: 0.5
  138.                 }
  139.             },
  140.             "indicator": [{
  141.                 "name": "CO",
  142.                 "max": 88
  143.             }, {
  144.                 "name": "CO?",
  145.                 "max": 88
  146.             }, {
  147.                 "name": "NO",
  148.                 "max": 88
  149.             }, {
  150.                 "name": "H?S",
  151.                 "max": 88
  152.             }, {
  153.                 "name": "O?",
  154.                 "max": 88
  155.             }, {
  156.                 "name": "SF6",
  157.                 "max": 88
  158.             }, {
  159.                 "name": "CH",
  160.                 "max": 88
  161.             }]
  162.         },
  163.         "series": [{
  164.             "name": "正常指标",
  165.             "type": "radar",
  166.             "symbol": "circle",
  167.             "symbolSize": 10,
  168.             "areaStyle": {
  169.                 "normal": {
  170.                     "color": "rgba(245, 166, 35, 0.4)"
  171.                 }
  172.             },
  173.             itemStyle: {
  174.                 color: 'rgba(245, 166, 35, 1)',
  175.                 borderColor: 'rgba(245, 166, 35, 0.3)',
  176.                 borderWidth: 10,
  177.             },
  178.             "lineStyle": {
  179.                 "normal": {
  180.                     "type": "dashed",
  182.                     "color": "rgba(245, 166, 35, 1)",
  183.                     "width": 2
  184.                 }
  185.             },
  186.             "data": [
  187.                 [80, 50, 55, 80, 50, 80, 48]
  188.             ]
  189.         }, {
  190.             "name": "实际指标",
  191.             "type": "radar",
  192.             "symbol": "circle",
  193.             "symbolSize": 10,
  194.             "itemStyle": {
  195.                 "normal": {
  196.                     color: 'rgba(19, 173, 255, 1)',
  197.                     "borderColor": "rgba(19, 173, 255, 0.4)",
  198.                     "borderWidth": 10
  199.                 }
  200.             },
  201.             "areaStyle": {
  202.                 "normal": {
  203.                     "color": "rgba(19, 173, 255, 0.5)"
  204.                 }
  205.             },
  206.             "lineStyle": {
  207.                 "normal": {
  208.                     "color": "rgba(19, 173, 255, 1)",
  209.                     "width": 2,
  210.                     "type": "dashed"
  211.                 }
  212.             },
  213.             "data": [
  214.                 [60, 60, 65, 60, 70, 40, 80]
  215.             ]
  216.         }]
  217.     };
  218.     myChart.setOption(option);
  219. }
  220. //左中
  221. IndexPage.prototype.info02=function(){
  222.     var myChart = echarts.init(document.getElementById("infoData02"));
  223.     var option = option = {
  224.         grid: {
  225.             left: '3%',
  226.             right: '4%',
  227.             bottom: '3%',
  228.             top: '2%',
  229.             containLabel: true
  230.         },
  231.         yAxis: [{
  232.             type: 'value',
  233.             axisLabel: {
  234.                 interval: 0,
  235.                 color: '#d3e0fa'
  236.             },
  237.             splitLine: {
  238.                 show: false
  239.             },
  240.             axisLine: {
  241.                 show: false
  242.             },
  243.             axisTick: {
  244.                 show: false
  245.             }
  246.         }],
  247.         xAxis: [{
  248.             type: 'category',
  249.             axisTick: {
  250.                 show: false
  251.             },
  252.             data: ['一键报警', '事故', '违章', '其它'],
  253.             axisLabel: {
  254.                 interval: 0,
  255.                 color: '#d3e0fa',
  256.             },
  257.             axisTick: {
  258.                 show: false
  259.             },
  260.             splitLine: {
  261.                 show: false
  262.             },
  263.             axisLine: {
  264.                 show: false
  265.             },
  266.             splitArea: {
  267.                 show: false,
  268.                 //  areaStyle: {
  269.                 //      color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
  270.                 //  }
  271.             }
  272.         }],
  273.         series: [{
  274.             type: 'pictorialBar',
  275.             symbol: 'path://M35,0L35,70L0,70z M35,0L35,70L70,70z',
  276.             data: [320, 341, 374, 390],
  277.             barWidth: '50%',
  278.             // barGap: 1, //柱子之间间距
  279.             symbolOffset: [0, -15],
  280.             //                    xAxisIndex: 0,
  281.             //                    yAxisIndex: 0,
  282.             z: 99,
  283.             label: {
  284.                 show: true,
  285.                 position: 'top',
  286.                 color: '#fff',
  287.                 fontSize: 24,
  288.             },
  289.             itemStyle: {
  290.                 normal: {
  291.                     color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
  292.                         offset: 0,
  293.                         color: 'rgba(51,189,216,0.3)'
  294.                     }, {
  295.                         offset: 0.5,
  296.                         color: 'rgba(51,189,216,0.3)'
  297.                     }, {
  298.                         offset: 0.5,
  299.                         color: 'rgba(51,189,216,1)'
  300.                     }, {
  301.                         offset: 1,
  302.                         color: 'rgba(51,189,216,1)'
  303.                     }]),
  304.                     opacity: 1,
  305.                 }
  306.             }
  307.         },
  308.             {
  309.                 name: '年报上报率2',
  310.                 type: 'pictorialBar',
  311.                 symbol: 'diamond',
  312.                 barWidth: '50%',
  313.                 symbolSize: ['100%', 30],
  314.                 // symbolOffset: [0, 13],
  315.                 //                    xAxisIndex: 0,
  316.                 //                    yAxisIndex: 0,
  317.                 z: 99,
  318.                 itemStyle: {
  319.                     normal: {
  320.                         color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
  321.                             offset: 0,
  322.                             color: 'rgba(51,189,216,0.8)'
  323.                         }, {
  324.                             offset: 0.5,
  325.                             color: 'rgba(51,189,216,0.8)'
  326.                         }, {
  327.                             offset: 0.5,
  328.                             color: 'rgba(51,189,216,1)'
  329.                         }, {
  330.                             offset: 1,
  331.                             color: 'rgba(51,189,216,1)'
  332.                         }]),
  333.                         opacity: 1,
  334.                     }
  335.                 },
  336.                 data: [320, 302,  374, 390],
  337.             }
  338.         ]
  339.     };;
  340.     myChart.setOption(option);
  341. }
  342. //左下
  343. IndexPage.prototype.info03 = function () {
  344.     var myChart = echarts.init(document.getElementById("infoData03"));
  345.     var fontColor = '#30eee9';
  346.     option = {
  347.         grid: {
  348.             left: '5%',
  349.             right: '10%',
  350.             top: '20%',
  351.             bottom: '15%',
  352.             containLabel: true
  353.         },
  354.         tooltip: {
  355.             show: true,
  356.             trigger: 'item'
  357.         },
  358.         legend: {
  359.             show: true,
  360.             x: 'center',
  361.             y: '35',
  362.             icon: 'stack',
  363.             itemWidth: 10,
  364.             itemHeight: 10,
  365.             textStyle: {
  366.                 color: '#1bb4f6'
  367.             },
  368.             data: ['充电', '安防', '照明']
  369.         },
  370.         xAxis: [
  371.             {
  372.                 type: 'category',
  373.                 boundaryGap: false,
  374.                 axisLabel: {
  375.                     color: fontColor
  376.                 },
  377.                 axisLine: {
  378.                     show: true,
  379.                     lineStyle: {
  380.                         color: '#397cbc'
  381.                     }
  382.                 },
  383.                 axisTick: {
  384.                     show: false,
  385.                 },
  386.                 splitLine: {
  387.                     show: true,
  388.                     lineStyle: {
  389.                         color: '#195384'
  390.                     }
  391.                 },
  392.                 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月']
  393.             }
  394.         ],
  395.         yAxis: [
  396.             {
  397.                 type: 'value',
  398.                 name: '万Kw.h',
  399.                 min: 0,
  400.                 max: 1000,
  401.                 axisLabel: {
  402.                     formatter: '{value}',
  403.                     textStyle: {
  404.                         color: '#2ad1d2'
  405.                     }
  406.                 },
  407.                 axisLine: {
  408.                     lineStyle: {
  409.                         color: '#27b4c2'
  410.                     }
  411.                 },
  412.                 axisTick: {
  413.                     show: false,
  414.                 },
  415.                 splitLine: {
  416.                     show: true,
  417.                     lineStyle: {
  418.                         color: '#11366e'
  419.                     }
  420.                 }
  421.             },
  422.              
  423.         ],
  424.         series: [
  425.             {
  426.                 name: '充电',
  427.                 type: 'line',
  428.                 stack: '总量',
  429.                 symbol: 'circle',
  430.                 symbolSize: 8,
  431.                 itemStyle: {
  432.                     normal: {
  433.                         color: '#0092f6',
  434.                         lineStyle: {
  435.                             color: "#0092f6",
  436.                             width: 1
  437.                         },
  438.                         areaStyle: {
  439.                             //color: '#94C9EC'
  440.                             color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
  441.                                 offset: 0,
  442.                                 color: 'rgba(7,44,90,0.3)'
  443.                             }, {
  444.                                 offset: 1,
  445.                                 color: 'rgba(0,146,246,0.9)'
  446.                             }]),
  447.                         }
  448.                     }
  449.                 },
  450.                 markPoint: {
  451.                     itemStyle: {
  452.                         normal: {
  453.                             color: 'red'
  454.                         }
  455.                     }
  456.                 },
  457.                 data: [120, 132, 101, 134, 90, 230, 210, 182, 191]
  458.             },
  459.             {
  460.                 name: '安防',
  461.                 type: 'line',
  462.                 stack: '总量',
  463.                 symbol: 'circle',
  464.                 symbolSize: 8,
  466.                 itemStyle: {
  467.                     normal: {
  468.                         color: '#00d4c7',
  469.                         lineStyle: {
  470.                             color: "#00d4c7",
  471.                             width: 1
  472.                         },
  473.                         areaStyle: {
  474.                             //color: '#94C9EC'
  475.                             color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
  476.                                 offset: 0,
  477.                                 color: 'rgba(7,44,90,0.3)'
  478.                             }, {
  479.                                 offset: 1,
  480.                                 color: 'rgba(0,212,199,0.9)'
  481.                             }]),
  482.                         }
  483.                     }
  484.                 },
  485.                 data: [220, 182, 191, 234, 290, 330, 310, 201, 154]
  486.             },
  487.             {
  488.                 name: '照明',
  489.                 type: 'line',
  490.                 stack: '总量',
  491.                 symbol: 'circle',
  492.                 symbolSize: 8,
  493.                 itemStyle: {
  494.                     normal: {
  495.                         color: '#aecb56',
  496.                         lineStyle: {
  497.                             color: "#aecb56",
  498.                             width: 1
  499.                         },
  500.                         areaStyle: {
  501.                             //color: '#94C9EC'
  502.                             color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
  503.                                 offset: 0,
  504.                                 color: 'rgba(7,44,90,0.3)'
  505.                             }, {
  506.                                 offset: 1,
  507.                                 color: 'rgba(114,144,89,0.9)'
  508.                             }]),
  509.                         }
  510.                     }
  511.                 },
  512.                 data: [150, 232, 201, 154, 190, 330, 410, 150, 232,]
  513.             }
  514.         ]
  515.     };
  516.     myChart.setOption(option);
  518. }
  519. //左下
  520. IndexPage.prototype.info0301 = function () {
  521.     var myChart = echarts.init(document.getElementById("infoData03_1"));
  522.     var fontColor = '#30eee9';
  523.     var option = {
  526.         tooltip: {
  527.             trigger: 'item',
  528.             formatter: "{b} : {c} ({d}%)"
  529.         },
  531.         visualMap: {
  532.             show: false,
  533.             min: 500,
  534.             max: 600,
  535.             inRange: {
  536.                 //colorLightness: [0, 1]
  537.             }
  538.         },
  539.         series: [{
  540.             name: '能耗统计',
  541.             type: 'pie',
  542.             radius: '50%',
  543.             center: ['50%', '50%'],
  544.             color: ['rgb(131,249,103)', '#FBFE27', '#FE5050', '#1DB7E5'], //'#FBFE27','rgb(11,228,96)','#FE5050'
  545.             data: [{
  546.                 value: 285,
  547.                 name: '安防'
  548.             },
  549.                 {
  550.                     value: 410,
  551.                     name: '照明'
  552.                 },
  553.                 {
  554.                     value: 274,
  555.                     name: '充电'
  556.                 },
  557.                 {
  558.                     value: 235,
  559.                     name: '其它'
  560.                 }
  561.             ].sort(function (a, b) {
  562.                 return a.value - b.value
  563.             }),
  564.             roseType: 'radius',
  566.             label: {
  567.                 normal: {
  568.                     formatter: ['{c|{c}}', '{b|{b}}'].join('\n'),
  569.                     rich: {
  570.                         c: {
  571.                             color: 'rgb(241,246,104)',
  572.                             fontSize: 12,
  573.                             fontWeight: 'bold',
  574.                             lineHeight: 5
  575.                         },
  576.                         b: {
  577.                             color: 'rgb(98,137,169)',
  578.                             fontSize: 12,
  579.                             height: 40
  580.                         },
  581.                     },
  582.                 }
  583.             },
  584.             labelLine: {
  585.                 normal: {
  586.                     lineStyle: {
  587.                         color: 'rgb(98,137,169)',
  588.                     },
  589.                     smooth: 0.2,
  590.                     length: 10,
  591.                     length2: 20,
  593.                 }
  594.             },
  595.             itemStyle: {
  596.                 normal: {
  597.                     shadowColor: 'rgba(0, 0, 0, 0.8)',
  598.                     shadowBlur: 50,
  599.                 }
  600.             }
  601.         }]
  602.     };
  603.     myChart.setOption(option);
  605. }
  607. //右上
  608. IndexPage.prototype.infoRight05 = function () {
  609.     var myChart = echarts.init(document.getElementById("infoData05"));
  610.     var option = {
  611.         title: {
  612.             text: '设备总数',
  613.             textStyle: {
  614.                 color: "#fff",
  615.                 fontSize: 16
  616.             },
  617.             top: "20%",
  618.             left: "center"
  619.         },
  620.         textStyle: {
  621.             fontSize: 12
  622.         },
  623.         series: [{
  624.             name: '辅助饼图最外层',
  625.             type: 'pie',
  626.             radius: '70%',
  627.             z: -1,
  628.             center: ["50%", "32%"],
  629.             hoverAnimation: false,
  630.             label: {
  631.                 normal: {
  632.                     show: false
  633.                 }
  634.             },
  635.             labelLine: {
  636.                 normal: {
  637.                     show: false
  638.                 }
  639.             },
  640.             itemStyle: {
  641.                 normal: {
  642.                     color: "rgba(0,0,0,0.35)"
  643.                 }
  644.             },
  645.             data: [{
  646.                 value: 1,
  647.                 name: '辅助饼图最外层'
  648.             }]
  649.         },
  650.         {
  651.             name: '辅助饼图黑色',
  652.             type: 'pie',
  653.             radius: '8%',
  654.             center: ["50%", "32%"],
  655.             z: 3,
  656.             hoverAnimation: false,
  657.             label: {
  658.                 normal: {
  659.                     show: false
  660.                 }
  661.             },
  662.             labelLine: {
  663.                 normal: {
  664.                     show: false
  665.                 }
  666.             },
  667.             itemStyle: {
  668.                 normal: {
  669.                     color: {
  670.                         type: 'radial',
  671.                         x: 0.1,
  672.                         y: -0.1,
  673.                         r: 1,
  674.                         colorStops: [{
  675.                             offset: 0,
  676.                             color: '#DDDDDD' // 0% 处的颜色
  677.                         }, {
  678.                             offset: 0.7,
  679.                             color: '#1B1811' // 50% 处的颜色
  680.                         }, {
  681.                             offset: 0.71,
  682.                             color: '#1B1811' // 51% 处的颜色
  683.                         }, {
  684.                             offset: 1,
  685.                             color: '#1B1811' // 100% 处的颜色
  686.                         }],
  687.                         globalCoord: true // 缺省为 false
  688.                     }
  689.                 }
  690.             },
  691.             data: [{
  692.                 value: 1,
  693.                 name: '辅助饼图黑色'
  694.             }],
  695.         },
  696.         {
  697.             name: '辅助饼图红色',
  698.             type: 'pie',
  699.             radius: '4%',
  700.             z: 4,
  701.             center: ["50%", "32%"],
  702.             hoverAnimation: false,
  703.             label: {
  704.                 normal: {
  705.                     show: false
  706.                 }
  707.             },
  708.             labelLine: {
  709.                 normal: {
  710.                     show: false
  711.                 }
  712.             },
  713.             itemStyle: {
  714.                 normal: {
  715.                     color: "#E50505"
  716.                 }
  717.             },
  718.             data: [{
  719.                 value: 1,
  720.                 name: '辅助饼图红色'
  721.             }],
  722.         },
  723.         {
  724.             name: '', //大仪表盘左侧
  725.             type: 'gauge',
  726.             min: 0,
  727.             max: 1000,
  728.             z: 2,
  729.             radius: '65%',
  730.             center: ["50%", "32%"],
  731.             startAngle: 130,
  732.             endAngle: 230,
  733.             splitNumber: 5,
  734.             clockwise: false,
  735.             animation: false,
  736.             detail: {
  737.                 show: false
  738.             },
  739.             data: [{
  740.                 value: 0,
  741.                 name: ''
  742.             }],
  743.             axisLine: {
  744.                 show: true,
  745.                 lineStyle: {
  746.                     color: [
  747.                         [1, 'red']
  748.                     ],
  749.                     width: 0
  750.                 }
  751.             },
  752.             splitLine: {
  753.                 length: 15,
  754.                 lineStyle: {
  755.                     color: '#fff',
  756.                     width: 2
  757.                 }
  758.             },
  759.             axisTick: {
  760.                 lineStyle: {
  761.                     color: 'red',
  762.                     width: 2
  763.                 }
  764.             },
  765.             axisLabel: {
  766.                 show: true,
  767.                 textStyle: {
  768.                     color: "#fff",
  769.                 },
  770.                 formatter: function (e) {
  771.                     return e.toFixed(0);
  772.                 }
  773.             },
  774.             itemStyle: {
  775.                 normal: {
  776.                     color: '#E50505'
  777.                 }
  778.             },
  779.             pointer: {
  780.                 width: 0
  781.             }
  782.         },
  783.         {
  784.             name: '', //大仪表盘右侧
  785.             type: 'gauge',
  786.             min: 1800,
  787.             max: 2800,
  788.             z: 2,
  789.             radius: '65%',
  790.             center: ["50%", "32%"],
  791.             startAngle: -50,
  792.             endAngle: 50,
  793.             splitNumber: 5,
  794.             clockwise: false,
  795.             animation: false,
  796.             detail: {
  797.                 show: false
  798.             },
  799.             data: [{
  800.                 value: 0,
  801.                 name: ''
  802.             }],
  803.             axisLine: {
  804.                 show: true,
  805.                 lineStyle: {
  806.                     color: [
  807.                         [1, 'red']
  808.                     ],
  809.                     width: 0
  810.                 }
  811.             },
  812.             splitLine: {
  813.                 length: 15,
  814.                 lineStyle: {
  815.                     color: '#fff',
  816.                     width: 2
  817.                 }
  818.             },
  819.             axisTick: {
  820.                 lineStyle: {
  821.                     color: 'red',
  822.                     width: 2
  823.                 }
  824.             },
  825.             axisLabel: {
  826.                 show: true,
  827.                 textStyle: {
  828.                     color: "#fff",
  829.                 },
  830.                 formatter: function (e) {
  831.                     return e.toFixed(0);
  832.                 }
  833.             },
  834.             itemStyle: {
  835.                 normal: {
  836.                     color: '#E50505'
  837.                 }
  838.             },
  839.             pointer: {
  840.                 width: 0
  841.             }
  842.         },
  843.         {
  844.             name: '异常设备', //大仪表盘(控制指针指向)
  845.             type: 'gauge',
  846.             min: 0,
  847.             max: 2800,
  848.             z: 2,
  849.             radius: '70%',
  850.             center: ["50%", "32%"],
  851.             startAngle: -50,
  852.             endAngle: 230,
  853.             splitNumber: 8,
  854.             clockwise: false,
  855.             animation: false,
  856.             detail: {
  857.                 textStyle: {
  858.                     fontSize: 24,
  859.                     color: '#f00'
  860.                 },
  861.                 // backgroundColor: "rgba(0,0,0,0.35)",
  862.                 offsetCenter: [0, '60%'],
  863.                 borderRadius: 1,
  864.                 formatter: function (e) {
  865.                     let eStr = e + '';
  866.                     let eArr = eStr.split('');
  867.                     let len = eArr.length;
  868.                     let str = '';
  869.                     for (let i = 0; i < len - 1; i++) {
  870.                         str += '{per|' + eArr[i] + '} ';
  871.                     }
  872.                     return str + '{per|' + eArr[len - 1] + '}';
  873.                 },
  874.                 rich: {
  875.                     per: {
  876.                         color: '#fff',
  877.                         backgroundColor: '#f00',
  878.                         padding: [3, 3, 3, 3],
  879.                         borderRadius: 5,
  880.                         //borderColor: '#aaa',
  881.                         borderWidth: 1,
  882.                         fontSize: 24,
  883.                         fontStyle: 'bold'
  884.                     }
  885.                 }
  886.             },
  887.             data: [{
  888.                 value: 1988,
  889.                 name: ''
  890.             }],
  891.             axisLine: {
  892.                 show: false,
  893.                 lineStyle: {
  894.                     color: [
  895.                         [1, 'rgba(0,0,0,0)']
  896.                     ],
  897.                     width: 0
  898.                 }
  899.             },
  900.             splitLine: {
  901.                 show: false
  902.             },
  903.             axisTick: {
  904.                 show: false
  905.             },
  906.             axisLabel: {
  907.                 show: false
  908.             },
  909.             itemStyle: {
  910.                 normal: {
  911.                     color: '#E50505'
  912.                 }
  913.             },
  914.             pointer: {
  915.                 width: 2
  916.             } //大仪表盘指针
  917.         }, {
  918.             name: '小仪表盘辅助饼图最外层',
  919.             type: 'pie',
  920.             radius: '50%',
  921.             z: -2,
  922.             startAngle: 30,
  923.             center: ["50%", "70%"],
  924.             hoverAnimation: false,
  925.             label: {
  926.                 normal: {
  927.                     show: false
  928.                 }
  929.             },
  930.             labelLine: {
  931.                 normal: {
  932.                     show: false
  933.                 }
  934.             },
  935.             itemStyle: {
  936.                 normal: { //设置半月形饼图
  937.                     color: {
  938.                         type: 'radial',
  939.                         x: 0.5,
  940.                         y: -0.16,
  941.                         r: 1.13,
  942.                         colorStops: [{
  943.                             offset: 0,
  944.                             color: 'rgba(0,0,0,0)' // 0% 处的颜色
  945.                         }, {
  946.                             offset: 0.6,
  947.                             color: 'rgba(0,0,0,0)' // 60% 处的颜色
  948.                         }, {
  949.                             offset: 0.61,
  950.                             color: 'rgba(0,0,0,0.35)' // 61% 处的颜色
  951.                         }, {
  952.                             offset: 1,
  953.                             color: 'rgba(0,0,0,0.35)' // 100% 处的颜色
  954.                         }],
  955.                         globalCoord: true // 缺省为 false
  956.                     }
  957.                 }
  958.             },
  959.             data: [{
  960.                 value: 1,
  961.                 name: '小仪表盘辅助饼图最外层'
  962.             }],
  963.         }, {
  964.             name: '', //小仪表盘最外层显示刻度标签
  965.             type: 'gauge',
  966.             min: 0,
  967.             max: 100,
  968.             z: 2,
  969.             radius: '55%',
  970.             center: ["50%", "70%"],
  971.             startAngle: 0,
  972.             endAngle: -180,
  973.             splitNumber: 5,
  974.             clockwise: false,
  975.             animation: false,
  976.             detail: {
  977.                 textStyle: {
  978.                     fontSize: 20,
  979.                     color: '#fff'
  980.                 },
  981.                 // backgroundColor: "rgba(0,0,0,0.35)",
  982.                 offsetCenter: [0, '-30%'],
  983.                 borderRadius: 1,
  984.                 formatter: function (e) {
  985.                     return '异常设备';
  986.                 }
  987.             },
  988.             data: [{
  989.                 value: 27,
  990.                 name: ''
  991.             }],
  992.             axisLine: {
  993.                 lineStyle: {
  994.                     color: [
  995.                         [1, 'rgba(0,0,0,0)']
  996.                     ],
  997.                     width: 0
  998.                 }
  999.             },
  1000.             splitLine: {
  1001.                 length: 15,
  1002.                 lineStyle: {
  1003.                     color: 'rgba(0,0,0,0)',
  1004.                     width: 2
  1005.                 }
  1006.             },
  1007.             axisTick: {
  1008.                 lineStyle: {
  1009.                     color: 'rgba(0,0,0,0)',
  1010.                     width: 2
  1011.                 }
  1012.             },
  1013.             axisLabel: {
  1014.                 textStyle: {
  1015.                     color: "#fff",
  1016.                 },
  1017.                 formatter: function (e) {
  1018.                     return e;
  1019.                 }
  1020.             },
  1021.             pointer: {
  1022.                 width: 0
  1023.             }
  1024.         }, {
  1025.             name: '', //小仪表盘显示轴线及刻度
  1026.             type: 'gauge',
  1027.             min: 0,
  1028.             max: 100,
  1029.             z: 2,
  1030.             radius: '40%',
  1031.             center: ["50%", "70%"],
  1032.             startAngle: 0,
  1033.             endAngle: -180,
  1034.             splitNumber: 5,
  1035.             clockwise: false,
  1036.             animation: false,
  1037.             detail: {
  1038.                 textStyle: {
  1039.                     fontSize: 24,
  1040.                 },
  1041.                 backgroundColor: "#f00",
  1042.                 offsetCenter: [0, '10%'],
  1043.                 borderRadius: 10,
  1044.                 formatter: function (e) {
  1045.                     return e + "%";
  1046.                 }
  1047.             },
  1048.             data: [{
  1049.                 value: 27,
  1050.                 name: ''
  1051.             }],
  1052.             axisLine: {
  1053.                 lineStyle: {
  1054.                     color: [
  1055.                         [1, '#fff']
  1056.                     ],
  1057.                     width: 0
  1058.                 }
  1059.             },
  1060.             splitLine: {
  1061.                 length: 15,
  1062.                 lineStyle: {
  1063.                     color: '#fff',
  1064.                     width: 2
  1065.                 }
  1066.             },
  1067.             axisTick: {
  1068.                 lineStyle: {
  1069.                     color: 'red',
  1070.                     width: 2
  1071.                 }
  1072.             },
  1073.             axisLabel: {
  1074.                 show: false
  1075.             },
  1076.             itemStyle: {
  1077.                 normal: {
  1078.                     color: '#E50505'
  1079.                 }
  1080.             },
  1081.             pointer: {
  1082.                 width: 3
  1083.             }
  1084.         }]
  1085.     };
  1086.     myChart.setOption(option);
  1087. }
  1088. //右下
  1089. IndexPage.prototype.infoRight06 = function () {
  1090.    //infoData06
  1092. }
  1093. IndexPage.prototype.showDevInfo = function () {
  1095.     this.hideStaticDiv();
  1096.     $(".devInfo").show(1000);
  1097.     setTimeout(function () {
  1098.         indexPage.showVideo1();
  1099.         indexPage.showVideo2();
  1100.         indexPage.wifi();
  1101.         indexPage.hj();
  1102.         indexPage.wbjcy();
  1103.         indexPage.dp();
  1104.         indexPage.yjbj();
  1105.         indexPage.cdz();
  1106.         indexPage.FSU();
  1107.     }, 1000);
  1108.    
  1109. }
  1111. IndexPage.prototype.hideDevInfo = function () {
  1112.     $(".devInfo").hide(1000);
  1114. }
  1116. //显示视频
  1117. IndexPage.prototype.showVideo1 = function () {
  1118.     
  1119.     var wsPlayer = new WSPlayer("videoPlayer_1", {
  1120.         modules: [
  1121.             {
  1122.                 client: RTSPClient,
  1123.                 transport: {
  1124.                     constructor: WebsocketTransport,
  1125.                     options: {
  1126.                         socket: "ws://39.108.139.152:2555/ws/rtsp"
  1127.                     }
  1128.                 }
  1129.             }
  1130.         ]
  1131.     });
  1132.     wsPlayer.setSource("rtsp://39.108.139.152:2554/stream/live/205967/10001?token=ZGV2R0JJRDozNDAyMDAwMDAwMTMyMDAwMTE3MA0Kb2JqSWQ6MjA1OTY3DQp1cmw6TVNDUDovLzIwNTk2Ny9zdHJlYW0/c3ViVHlwZT1HQl9UMjgxODE=");
  1133. }
  1134. IndexPage.prototype.showVideo2 = function () {
  1137.     var wsPlayer = new WSPlayer("videoPlayer_2", {
  1138.         modules: [
  1139.             {
  1140.                 client: RTSPClient,
  1141.                 transport: {
  1142.                     constructor: WebsocketTransport,
  1143.                     options: {
  1144.                         socket: "ws://39.108.139.152:2555/ws/rtsp"
  1145.                     }
  1146.                 }
  1147.             }
  1148.         ]
  1149.     });
  1150.     wsPlayer.setSource("rtsp://39.108.139.152:2554/stream/live/205428/10001?token=ZGV2R0JJRDozNDAyMDAwMDAwMTMyMDAwMDk5MQ0Kb2JqSWQ6MjA1NDI4DQp1cmw6TVNDUDovLzIwNTQyOC9zdHJlYW0/c3ViVHlwZT1HQl9UMjgxODE=", "rtsp");
  1151. }
  1152. //wifi
  1153. IndexPage.prototype.wifi = function () {
  1154.     
  1155. }
  1156. //环境
  1157. IndexPage.prototype.hj = function () {
  1159. }
  1160. //微波检测仪
  1161. IndexPage.prototype.wbjcy = function () {
  1163. }
  1164. //大屏
  1165. IndexPage.prototype.dp = function () {
  1167. }
  1168. //一键报警
  1169. IndexPage.prototype.yjbj = function () {
  1170. }
  1171. //充电桩
  1172. IndexPage.prototype.cdz = function () {
  1173. }
  1174. //FSU
  1175. IndexPage.prototype.FSU = function () {
  1176. }
  1178. //隐藏所有统计信息
  1179. IndexPage.prototype.hideStaticDiv = function () {
  1180.     $(".staticDivBg").hide(1000);
  1182. }
  1183. IndexPage.prototype.showStaticDiv = function () {
  1184.     $(".staticDivBg").show(1000);
  1185. }
  1187. var indexPage = null;

 

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

后面我将继续讲解用webgl 建立 3D隧道、3D桥梁、webgl实现三维隧道桥梁、three.js实现三维隧道桥梁、桥梁隧道三维应用炫酷效果等等

技术交流 1203193731@qq.com

交流微信：

　　　　

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

 

 

其它相关文章：

使用webgl(three.js)创建3D机房，3D机房微模块详细介绍(升级版二)

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

如何用webgl(three.js)搭建一个3D库房,3D密集架,3D档案室,-第二课

使用webgl(three.js)搭建一个3D建筑，3D消防模拟——第三课

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

如何用webgl(three.js)搭建不规则建筑模型，客流量热力图模拟

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

原文链接：http://www.cnblogs.com/yeyunfei/p/11579334.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

HTML5热门文章

  • Webpack友好的错误提示插件friendly-errors-webpack-plugin
  • uni-app 微信小程序 picker 三级联动
  • 记录vue用 html5+做移动APP 用barcode做扫一扫功能时安卓 的bug(黑屏、错位等等)和解决方法
  • H5+ 操作手机日历
  • uni-app开发经验分享十五： uni-app 蓝牙打印功能
  • 设计中的设计PDF下载高清完整扫描原版
  • 前端canvas动画如何转成mp4视频的方法
  • antd通过 filterDropdown 自定义--按某天时间搜索
  • H5+ API 设置手机状态栏颜色以及沉浸式状态栏
  • elementui中el-input联想搜索框

    • HTML5推荐文章

  • canvas实现动态替换人物的背景颜色
  • form 表单恢复初始数据
  • canvas?中如何实现物体的框选
  • 前端canvas中物体边框和控制点的实现示例
  • FileReader()读取文件、图片上传预览
  • 跨域访问方法介绍(5)--使用 window.postMessage 传递数据
  • 跨域访问方法介绍(3)--使用片段识别符传值
  • 跨域访问方法介绍(4)--使用 window.name 传值
  • HTML
  • 前端常用模板引擎- artTemplate

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号