threejs 3d地图粒子效果

threejs yekong

threejs 3d地图粒子效果实例,可以结合threejs 3d地图实现省份下钻实例实现下钻。

演示实例

threejs 3d地图粒子效果

其他实例

带下钻实例的地图效果

threejs 3d地图粒子效果下钻版 - 江西省

threejs 3d地图粒子效果下钻版 - 河北省

threejs 3d地图粒子效果下钻版 - 河南省

效果截图

threejs 3d地图粒子效果

地图下钻动画

3d旋转图片效果

地图中,我们使用了旋转的背景图效果,threejs 3d旋转的图片效果,这里我们单独把这一块分离出来学习使用。

设置地图视角

我们在更换地图数据后,中心点可能并不符合我们的意愿,或者我们想调整成自己想要的中心点,但是又不知道怎么调整,这里我们来讲一下如何配置地图中心点

项目实例中一开始渲染的是河北地图,在我们更换为其他地图后,中心点会偏移,比如我们更换为了中国地图后,渲染出来的效果是这个样子的,这并不是我们想要的效果。

获取地图中心点

我们想要的效果可能是这个样子的

中国地图

首先我们需要找到渲染动画这一块,添加一段代码console.log(this.camera),调试输出相机的位置。然后通过鼠标调整好我们想要的角度。

配置代码

复制相机位置数据

然后在开发工具里找到调试输出的数据,找到positon这个字段,将里面的数据复制出来。
复制相机位置数据

相机位置回填

找到我们的相机位置,将复制的数据替换掉旧的数据就可以了。

相机位置回填

更多threejs实例

threejs实例效果汇总

喜欢