使用墨卡托投影将geoJson经纬度数据转为平面坐标数据,进而使用threejs ExtrudeGeometry生成所示地图三维模型
主要技术点
- 三维渲染 threejs
- 数据转换 d3-geo 变换代码
const projection = geoMercator().center([104.0, 37.5]).scale(36).translate([0, 0]);
center: 中心经纬度
scale: 转换后坐标缩放系数
translate:转换后平移量
功能点
- 简单光效
- 自主材质调节(演示地址右上角)
- 未完待续,主要没找到炫酷的参考(懒- -),有空就更新。。。
演示地址:
点我