Three.js精灵模型Sprite小案例(中国城市PM2.5可视化)

中国城市PM2.5可视化案例

本文是Three.js电子书的10.2节

本节课通过精灵模型等不同方式解析下面各个城市的PM2.5数据，实现一个非常简单的各个城市PM2.5可视化案例。

数据文件数据.json给出了各个城市的PM2.5值和城市坐标。解析的时候把城市的PM2.5大小用圆圈大小表示，城市坐标直接通过模型位置属性设置。

[{
  "name": "海门",
  "value": 9,
  "coordinate": [121.15, 31.89]
},
...
...
...
{
  "name": "青岛",
  "value": 18,
  "coordinate": [120.33, 36.07]
},{
  "name": "武汉",
  "value": 273,
  "coordinate": [114.31, 30.52]
}]

精灵模型Sprite实现

/**
 * 一个精灵模型对象表示一个城市的位置和数据
 */
// 加载一个背景透明的圆形贴图，矩形精灵显示为圆形效果
var texture = new THREE.TextureLoader().load("sprite.png");
// 创建组对象，包含所有精灵对象
let group = new THREE.Group();
// 文件加载对象
var loader = new THREE.FileLoader().setResponseType('json');
// 加载PM2.5数据
loader.load('数据.json', function(data) {
  //遍历数据
  data.forEach(elem => {
    // 精灵材质
    var spriteMaterial = new THREE.SpriteMaterial({
      map: texture, //设置精灵纹理贴图
      transparent: true,
      opacity: 0.5,
    });
    // 创建精灵模型对象
    var sprite = new THREE.Sprite(spriteMaterial);
    group.add(sprite);
    // 控制精灵大小   使用PM2.5大小设置精灵模型的大小
    // 注意适当缩放pm2.5大小,以便得到更好的显示效果
    var k = elem.value / 200
    sprite.scale.set(k, k, 1);
    //获得城市坐标设置精灵模型对象的位置
    sprite.position.set(elem.coordinate[0], elem.coordinate[1], 0)
  });
  // 中国城市坐标整体的几何中心不在坐标原点，需要适当的平移
  group.position.set(-110, -30, 0);
  scene.add(group);//把精灵群组插入场景中
})

关于其他非精灵方式如何实现该效果，这里不再详述，可以查看课程案例源码。实际的可视化项目要比这复杂得多，本节课的主要目的是为了通过一个实例讲解精灵模型，所以不再增加交互等功能。