threejs 给地图添加气泡效果实例

threejs 给地图添加气泡效果

创建圆形几何体

通过threejs的CircleBufferGeometry来实现圆形气泡

// 引入three.js
import * as THREE from 'three/build/three.module.js';
var geometry = new THREE.CircleBufferGeometry(1,30);//一个圆形几何体
//
function cirMesh(x,y,size,color) {//参数:x,y坐标 size大小 color颜色
  var material = new THREE.MeshBasicMaterial({
      color: color,
      transparent: true,
      opacity: 0.6,//半透明效果，和背景相融合
  });
  var mesh = new THREE.Mesh(geometry, material); //网格模型对象
  mesh.position.set(x,y,0);//圆圈位置设置
  mesh.scale.set(size,size,size);//圆圈大小设置
  return mesh;
}
export { cirMesh };

加载气泡数据渲染气泡

loader.load(modelUrl + 'json/cirMeshData.json', function (data) {


    var color1 = new THREE.Color(0x00ffcc);
    var color2 = new THREE.Color(0xff6666);

    var pmArr = [];//所有pm2.5数据集合
    data.arr.forEach(function (obj) {
        var pm25 = obj.value;//访问数据PM2.5值
        pmArr.push(pm25);
    })
    pmArr.sort(compareNum);
    // console.log('排序后pm2.5',pmArr);
    var Max = pmArr[pmArr.length - 1]//PM2.5最大值作为基准值
    data.arr.forEach(function (obj) {
        var pm25 = obj.value
        // 颜色插值计算
        var color = color1.clone().lerp(color2.clone(), pm25 / Max);
        // 气泡大小和pm2.5正相关，同时注意根据相机渲染范围来设置合适大小
        var mesh = cirMesh(obj.coordinate[0], obj.coordinate[1], pm25 / Max, color.getHex())
        cirGroup.add(mesh);
        mesh.name = obj.name;
    })
})

// 数组排序规则
function compareNum(num1, num2) {
    if (num1 < num2) {
        return -1;
    } else if (num1 > num2) {
        return 1;
    } else {
        return 0;
    }
}

最终实现效果

webGL 3D地图可视化实例

教程地址

WebGL/Three.js前端3D可视化