前言：

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

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

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

序：

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

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

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

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

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

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

技术交流 [email protected]

交流微信：

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

一、效果功能展示：

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

1.1这是园区的整体情况

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

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

 1.4、这是灯杆的详情展示

 二、具体实现

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

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

 大楼模型代码：

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

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

灯杆模型代码：

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

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

 2.2、模型组装

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

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

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

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

近处的适当模拟即可

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

 四、主页面HTML代码：

 主页面数据逻辑代码