高德地图API城市扫描线效果
1.前言
本章的主要内容就是使用高德的API结合Threejs 实现城市扫描线的效果,要是能不用高德,我觉得还是不用,除了底图和交通图之外,api这块还是有很多的问题的。
参考文章:
1.用three.js实现炫酷的城市扫光效果 这个的效果感觉比较高级,主要讲述如何用材质的方式来实现扫光效果
2.使用three.js实现炫酷的3D城市扫光效果 有两种思路:第一种,我们可以回忆下点光源是如何实现的,就是在片元着色器判断该点光源到每一个片元的距离,对吧?按照这种思路,我们如果实现圆环形扫光就可以直接在片元判断该片元是否在这个环形区域内就搞定了,如果是片形扫光我们可以判断该片元是否在该包围盒内对吧。第二种方式:计算uv
这种思路非常简单,就是哪些物体需要扫光效果,我们就为它们整体计算uv,为这个区域预先计算出水平包围盒,然后整体去计算uv,如果我们不需要冲击的效果,可以让物体的高度不影响uv的权重,如果想有冲击的效果则高度应该给一个权重(注:如果实在不理解怎么计算uv,而且你又是用geojson创建的楼宇,那你可以用经纬度直接计算uv,这种方式最简单。所有uv的计算建议在worker中计算)。预处理完uv之后,我们可以想象一下,我们贴什么图,就可以扫出什么形状来,而且还可以用材质动画作出更加炫酷的效果,这些效果可以直接给美工,让他们去做。
3.多光源 这是官方提供的一个多光源的展示效果,但是不是那种扫描整个的圈的效果,不太符合要求。
4.使用Obj 模型 + shader 实线 加载 obj 格式文件加载到 scene中; 使用 ShaderMaterial 材质 这里的源码实现了扫光效果,但是色彩我觉得差了一点。
5.谭术 / threeMap 这里也是一个源码,没有仔细的看。
6.可视化-three.js 城市 波浪特效 城市 扫光 掠过效果 这里有模型,有代码。
7.使用three.js实现炫酷的3D扫光效果后期(shader通道实现扫光效果)
8.高德地图实现marker水波纹雷达扩散覆盖效果 每一帧改变一下circle半径即可。然后多个circle覆盖在一起,按时间差进行绘制,向外扩散时又同步缩减透明度,即可实现水波纹效果。
9.高德地图实现水波纹扩散 这个的代码感觉更加的全,最后我经过修改这个,实现了水波效果
1.用three.js实现炫酷的城市扫光效果 这个的效果感觉比较高级,主要讲述如何用材质的方式来实现扫光效果
2.使用three.js实现炫酷的3D城市扫光效果 有两种思路:第一种,我们可以回忆下点光源是如何实现的,就是在片元着色器判断该点光源到每一个片元的距离,对吧?按照这种思路,我们如果实现圆环形扫光就可以直接在片元判断该片元是否在这个环形区域内就搞定了,如果是片形扫光我们可以判断该片元是否在该包围盒内对吧。第二种方式:计算uv
这种思路非常简单,就是哪些物体需要扫光效果,我们就为它们整体计算uv,为这个区域预先计算出水平包围盒,然后整体去计算uv,如果我们不需要冲击的效果,可以让物体的高度不影响uv的权重,如果想有冲击的效果则高度应该给一个权重(注:如果实在不理解怎么计算uv,而且你又是用geojson创建的楼宇,那你可以用经纬度直接计算uv,这种方式最简单。所有uv的计算建议在worker中计算)。预处理完uv之后,我们可以想象一下,我们贴什么图,就可以扫出什么形状来,而且还可以用材质动画作出更加炫酷的效果,这些效果可以直接给美工,让他们去做。
3.多光源 这是官方提供的一个多光源的展示效果,但是不是那种扫描整个的圈的效果,不太符合要求。
4.使用Obj 模型 + shader 实线 加载 obj 格式文件加载到 scene中; 使用 ShaderMaterial 材质 这里的源码实现了扫光效果,但是色彩我觉得差了一点。
5.谭术 / threeMap 这里也是一个源码,没有仔细的看。
6.可视化-three.js 城市 波浪特效 城市 扫光 掠过效果 这里有模型,有代码。
7.使用three.js实现炫酷的3D扫光效果后期(shader通道实现扫光效果)
8.高德地图实现marker水波纹雷达扩散覆盖效果 每一帧改变一下circle半径即可。然后多个circle覆盖在一起,按时间差进行绘制,向外扩散时又同步缩减透明度,即可实现水波纹效果。
9.高德地图实现水波纹扩散 这个的代码感觉更加的全,最后我经过修改这个,实现了水波效果