从零开始搭建开源智慧城市项目（五）

3D模型在线预览提供多种低代码平台3D模型在线预览解决方案，实现了将多种3D模型格式无缝集成到低代码业务表单中。这意味着用户可以在不离开低代码平台的情况下，直接查看和操作3D模型，极大地提升了数据可视化的效果和用户交互体验。

添加天空盒思路

three添加天空盒有两种格式，一种是需要上下左右前后六张图来组成天空盒，一种是创建一个足够大的球，把这个球表面贴上一张图 场景在球里面组成天空球。

六张图：这种方式是通关three的THREE.CubeTextureLoader().load方法，吧六张图地址数据添加到该对象里面去然后把场景的背景设置为这个对象。原理图如下所示：

一张图：因为three没有加载hdr天空盒的方式，可以模仿加载六张图的方式，因为加载六张图相当于创建了一个正方体，每个面贴了一张图片材质，相机在正方体内形成天空盒。那么hdr单张图就可以通过创建一个球体，球体表面贴图，相机在球体里面来实现。

天空盒实现

我这里天空盒实现选的是第一种方式（因为数据是六张图的），代码如下：

数据如下

效果

扩散圆实现

通过THREE.RingGeometry创建一个圆,然后给这个圆添加想要实现效果的贴图，然后再render循环里面每一帧都改变这个圆的大小。

通过创建THREE.TextureLoader()来进行读取图片纹理数据其中this.img为图片地址,创建THREE.RingGeometry模型，把读出来的纹理赋给THREE.MeshBasicMaterial材质，然后再render循环里面改变这个模型的缩放比例来进行扩散效果模拟。 代码如下：

数据格式

效果图

扩散墙实现

扩散墙和上一节一样 是通过ShaderMaterial来实现的，要实现的效果是墙面随着高度增加透明度也增加，所以模型点位的透明度和高度呈反比。模型的扩散效果是把模型点位的位置通过mod函数来进行取余运算（%），把计算结果限制再0-1之间。

效果图