threejs项目开发中,我们需要一些运动效果,比如这里我们让模型围绕y轴进行旋转。
动态效果
threejs版本
"three": "^0.154.0",
实例演示地址
threejs 渲染循环动画
让模型旋转
我们可以通过rota...
yekong
1年前 (2023-08-09)
喜欢
数据可视化大屏项目开发过程中经常需要地图geo数据,这里将数据获取的方式整理出来,供大家参考。
阿里云GeoJSON在线工具
地址:阿里云GeoJSON在线工具
通过该工具可以轻松获得中国所有省份、地级市的包含子行政区轮廓经纬度坐标。
geojson.io工具
geojson.i...
yekong
1年前 (2023-08-02)
喜欢
数据可视化大屏项目开发工程中,对效果追求越来越高,之前我们实现的是:threejs 3d地图通过gsap实现从远到近的入场动画,今天要实现的效果是:地图标签要显示自定义图标,并且鼠标移入地图后,弹窗显示地图区域的内容。
threejs版本号
"three": "^0.154.0...
yekong
1年前 (2023-07-28)
喜欢
数据可视化大屏项目开发工程中,对效果追求越来越高,所以前端也需要不断的积累效果,以便于快速应用到项目用,不用等到用的时候才想到开发,时间上就紧张了,今天要实现的是地图从远到近的入场动画。
threejs版本号
"three": "^0.154.0",
vue版本号
"vue...
yekong
1年前 (2023-07-28)
喜欢
在之前我们使用echarts绘制的可以下钻的3d地图,vue echarts-gl 3d地图从中国下钻到市级实例,但是echarts-gl绘制出来的3d地图自定义程度不够,我们想要更加灵活的自定义3d地图,所以选择使用threejs来实现3d地图,今天我们来使用threejs来实...
yekong
2年前 (2023-07-03)
喜欢
在之前的threejs 绘制地图高度不受经纬度影响,我们解决了高度问题,但是又衍生出了新的问题,就是地图出现凹陷的情况,我们需要处理一下这种情况。
这种情况可能是由于地图区域在渲染时,高度数值与其他区域相比过低。为了使地图区域不再看起来像凹下去的一块,可以对高度数值进行一定的调整...
yekong
2年前 (2023-07-03)
喜欢
在使用threejs绘制地图的时候,threejs 在vue3项目中绘制3d地图效果实例,最近想着做一个地图下钻的效果,但是地图的高度会受到经纬度的影响,进而导致绘制出来的地图高度会跟着受影响,所以我们需要处理一下。
在使用Three.js进行地理空间数据的可视化时,经纬度会影响...
yekong
2年前 (2023-07-03)
喜欢
在threejs 在3d地图中绘制css2d地名中,我们给地图添加了css2d标签来标注地名,今天我们在之前的基础上来实现鼠标移入地图高亮,并显示对应区域名称。
效果截图
鼠标移入高亮染效果视频
射线拾取
我们通过射线拾取来获取地图信息,并进行高亮,显示当前区域名称。
/**...
yekong
2年前 (2023-07-02)
喜欢
vue 数据可视化大屏 项目开发中,经常需要渲染一些3d地图效果,今天整理一下3d地图并在3d地图中标注地名代码,希望能够让代码快速应用到项目中。
CSS2D标签面向摄像机,场景缩放时,缩小放大都一样大,不被模型遮挡,通过DOM事件点击
css2d标签渲染效果视频
演示实例
...
yekong
2年前 (2023-06-20)
喜欢
上一节我们通过threejs 在3d地图中绘制css2d地名,这一节我们使用css3d来渲染地图地名标签。
大部分代码和threejs 在3d地图中绘制css2d地名一致,只是把css2d标签改为css3d标签了。
CSS3D不面向摄像机,场景缩放时,缩小放大跟随着,不被模型遮挡...
yekong
2年前 (2023-06-20)
喜欢