Three 精灵模型和粒子系统

本章节主要内容是介绍一个Threejs新的模型对象，也就是精灵模型对象Sprite。精灵模型对象和网格模型一样需要设置材质，不过精灵模型不需要程序员设置几何体，Threejs系统渲染的时候会自动设置。

通过Threejs精灵模型可以给场景中模型对象设置标签，也快成大量精灵模型对象模拟一个粒子系统，实现下雨或下雪的渲染效果。

精灵模型Sprite

Three.js的精灵模型对象Sprite和Threejs的网格模型Mesh一样都是模型对象，基类都是Object3D,关于精灵模型对象Sprite的方法和属性除了可以查看文档Sprite，也可以查看基类Object3D。

创建精灵模型对象Sprite和创建网格模型对象一样需要创建一个材质对象，不同的地方在于创建精灵模型对象不需要创建几何体对象Geometry，精灵模型对象本质上你可以理解为已经内部封装了一个平面矩形几何体PlaneGeometry，矩形精灵模型与矩形网格模型的区别在于精灵模型的矩形平面会始终平行于Canvas画布。

如果你想理解精灵模型的本质可以阅读官方文件three.js-master精灵模型对象的封装源码\src\objects\Sprite.js、解析渲染精灵模型的源码\src\renderers\webgl\WebGLSpriteRenderer.js。

Sprite和SpriteMaterial

通过Sprite创建精灵模型不需要几何体，只需要给构造函数Sprite的参数设置为一个精灵材质SpriteMaterial即可。

精灵材质对象SpriteMaterial和普通的网格材质一样可以设置颜色.color、颜色贴图.map、开启透明.transparent、透明度.opacity等属性，精灵材质对象SpriteMaterial的基类是材质Material。

精灵材质SpriteMaterial的属性除了和网格材质类似的属性和方法外，还有一些自己独特的方法和属性，比如.rotation旋转精灵模型，更多相关属性和方法可以查看threejs文档关于SpriteMaterial的介绍。

var texture = new THREE.TextureLoader().load("sprite.png");
// 创建精灵材质对象SpriteMaterial
var spriteMaterial = new THREE.SpriteMaterial({
  color:0xff00ff,//设置精灵矩形区域颜色
  rotation:Math.PI/4,//旋转精灵对象45度，弧度值
  map: texture,//设置精灵纹理贴图
});
// 创建精灵模型对象，不需要几何体geometry参数
var sprite = new THREE.Sprite(spriteMaterial);
scene.add(sprite);
// 控制精灵大小，比如可视化中精灵大小表征数据大小
sprite.scale.set(10, 10, 1); //// 只需要设置x、y两个分量就可以

在线运行案例

.scale和.position

精灵模型对象和网格模型Mesh对一样基类都是Object3D，自然精灵模型也有缩放属性.scale和位置属性.position，一般设置精灵模型的大小是通过.scale属性实现，而精灵模型的位置通过属性.position实现，精灵模型和普通模型一样，可以改变它在三维场景中的位置，区别在于精灵模型的正面一直平行于canvas画布。

在使用透视投影相机对象的时候，精灵模型对象显示的大小和网格模型一样受距离相机的距离影响，也就是距离越远，显示效果越小。

Sprite用途

说到精灵模型对象，这种情况下你肯定关心它的用途，关于用途，你可以在三维场景中把精灵模型作为一个模型的标签，标签上可以显示一个写模型的信息，你可以通过足够多的精灵模型对象，构建一个粒子系统，来模拟一个下雨、森林、或下雪的场景效果。

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

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

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

JSON文件内容格式：

[{
  "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);//把精灵群组插入场景中
})

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

模拟树林效果

下面通过通过一张背景透明的树纹理贴图tree.png作为精灵模型的纹理贴图.map模拟一个树林效果。

精灵源码

通过循环程序创建足够多的精灵模型，然后通过javascript随机函数Math.random()使精灵模型的位置随机分布。

如果你想实现更好的树林效果，也可以使用矩形网格模型Mesh代替精灵模型，主要是场景旋转的时候，树的精灵模型平面总是平行于canvas画布。

/**
 * 精灵创建树林效果
 */
// 加载树纹理贴图
var textureTree = new THREE.TextureLoader().load("tree.png");
// 批量创建表示一个树的精灵模型
for (let i = 0; i < 100; i++) {
  var spriteMaterial = new THREE.SpriteMaterial({
    map:textureTree,//设置精灵纹理贴图
  });
  // 创建精灵模型对象
  var sprite = new THREE.Sprite(spriteMaterial);
  scene.add(sprite);
  // 控制精灵大小,
  sprite.scale.set(100, 100, 1); //// 只需要设置x、y两个分量就可以
  var k1 = Math.random() - 0.5;
  var k2 = Math.random() - 0.5;
  // 设置精灵模型位置，在xoz平面上随机分布
  sprite.position.set(1000 * k1, 50, 1000 * k2)
}

在线运行案例

把一张草地贴图作为一个矩形网格模型的纹理贴图模拟树林一片草地的效果，注意对纹理进行阵列，草地贴图像素宽高较小，矩形平面网格模型区域较大。

/**
 * 创建一个草地地面
 */
var geometry = new THREE.PlaneGeometry(1000, 1000); //矩形平面
// 加载草地纹理贴图
var texture = new THREE.TextureLoader().load("grass.jpg");
// 设置纹理的重复模式
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
// uv两个方向纹理重复数量
texture.repeat.set(10, 10);
var material = new THREE.MeshLambertMaterial({
  color: 0x777700,
  // map:texture,
});
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
scene.add(mesh); //网格模型添加到场景中
mesh.rotateX(-Math.PI/2);

在线运行案例

模拟下雨效果

本节课通过一个精灵模拟模拟下雨的场景进一步建立精灵模型和粒子系统的概念。

基本思路就是通过足够多的精灵模型构成一个粒子系统，然后每一个雨滴按照在一定空间内随机分布，每个精灵模型都使用一个背景透明的雨滴rain.png作为纹理贴图。

在空间中随机生成静态分布的雨滴代码：

/**
 * 精灵创建下雨效果
 */
// 加载雨滴理贴图
var textureTree = new THREE.TextureLoader().load("/img/threejs/rain.png");
	  var group = new THREE.Group();
// 批量创建表示雨滴的精灵模型
for (let i = 0; i <800; i++) {
  var spriteMaterial = new THREE.SpriteMaterial({
    map:textureTree,//设置精灵纹理贴图
  });
  // 创建精灵模型对象
  var sprite = new THREE.Sprite(spriteMaterial);
  scene.add(sprite);
  // 控制精灵大小,
  sprite.scale.set(8, 10, 1); //// 只需要设置x、y两个分量就可以
  var k1 = Math.random() - 0.5;
  var k2 = Math.random() - 0.5;
  var k3 = Math.random() - 0.5;
  // 设置精灵模型位置，在整个空间上上随机分布
  sprite.position.set(500 * k1, 300 * Math.random(), 500 * k2);
  group.add(sprite);
}
scene.add(group);//雨滴群组插入场景中

雨滴动态运动怎么实现？把所有创建的精灵模型插入到一个组对象Group中，然后在渲染函数render()中周期性改变每个表示雨滴精灵模型的y坐标，从上到下移动。

在渲染代码中加入如下部分，增加动态效果：

// 渲染函数
function render() {
  // 每次渲染遍历雨滴群组，刷新频率30~60FPS，两帧时间间隔16.67ms~33.33ms
  // 每次渲染都会更新雨滴的位置，进而产生动画效果
  group.children.forEach(sprite => {
    // 雨滴的y坐标每次减1
    sprite.position.y -= 1;
    if (sprite.position.y < 0) {
      // 如果雨滴落到地面，重置y，从新下落
      sprite.position.y = 200;
    }
  });
  renderer.render(scene, camera); //执行渲染操作
  requestAnimationFrame(render);//请求再次执行渲染函数render，渲染下一帧
}

站在雨中的效果怎么实现？这里就不能使用正投影相机了。为了更好观察下雨的效果，就像人站在实际的雨中一样，需要使用透视投影相机PerspectiveCamera，同时把透视投影相机对象的位置设置在雨粒子系统里面而不是雨粒子系统的外面。

把透视投影相机对象放在雨粒子系统中，可以通过放大雨精灵分布的空间范围，也可以直接调整透视投影相机的位置。

你可以看到下面代码精灵模型的分布空间范围是(0,-150,-300)到(600,150,300)对角线构成的长方体空间中,相机的位置是(220, 100, 220)。

  var k1 = Math.random() - 0.5;
  var k2 = Math.random() - 0.5;
  // 设置精灵模型位置，在整个空间上上随机分布
  sprite.position.set(600 * k1, 300 * Math.random(), 600 * k2);

/**透视投影相机对象*/
var camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
camera.position.set(220, 100, 220);//设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

在线运行案例

转载本站内容时，请务必注明来自W3xue，违者必究。