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);//把精靈羣組插入場景中
})

關於其他非精靈方式如何實現該效果，這裏不再詳述，可以查看課程案例源碼。實際的可視化項目要比這複雜得多，本節課的主要目的是爲了通過一個實例講解精靈模型，所以不再增加交互等功能。