持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

示例代码采用three.js-r73版本: github.com/mrdoob/thre…

上一节我们加载了好了模型，这一节我们来看看如何将Geometry生成粒子系统。加载粒子系统，需要使用到粒子系统类。让我们来看看吧。

粒子系统类

• 用来创建点的类，也可以用来批量管理，基于几何体的每个顶点来渲染粒子。

THREE.Points = function ( geometry, material )

• geometry: 几何体，用来设置粒子的坐标
• material： 材质，用来决定渲染粒子的外观

注意：points必须要通过WebGLRenderer渲染方式来创建

• 点材质

THREE.PointsMaterial

• 与THREE.Points相配套的材质,和其他材质一样，可以设置颜色、大小

渲染一个平面粒子系统

• 我们在之前加载好模型的项目里，渲染一个平面粒子系统
• points粒子系统的创建过程一般可以总结为三步：

1. 创建一个几何对象geometry（也可以是外部导入的模型），然后基于几何体自身的顶点集合geometry.vertices创建粒子（即 将网格转化为粒子），每个顶点将代表粒子系统中的每个粒子。我们这里创建平面几何体。

var planeGeometry = new THREE.PlaneGeometry(15000,15000,64,64)

2. 创建一个粒子材质，Points对应PointsMaterial，来实现每个粒子的图案。这里我们创建一个红色的点材质

var pointsMaterial = new THREE.PointsMaterial({ color: 0xFF0000,size: 30})

3. 通过以上两步的几何体和点材质，创建一个Points类的物体，这个物体则代表了整个粒子系统。

  var grid = new THREE.Points(planeGeometry, pointsMaterial);

• 此时粒子平面生成了，是面向我们的我们需要旋转一下，让他成为一个平面

grid.rotation.x = Math.PI / 2
grid.position.y = -400; // 向下移动一些距离

parent = new THREE.Object3D();
  scene.add(parent);

  var grid = new THREE.Points(new THREE.PlaneBufferGeometry(15000,15000,64,64), new THREE.PointsMaterial({
    color: 0xff0000, size: 30,
  }))
  grid.position.y = -400;
  grid.rotation.x = - Math.PI / 2
  parent.add(grid)

• 我们可以创建一个分组，把我们的粒子平面添加到分组中，方便操作

parent = new THREE.Object3D();
scene.add(parent);
// scene.add(grid)
parent.add(grid)

codepen示例代码

总结

这一节我们主要讲了以下内容：

• 粒子系统类
• 点材质
• 渲染一个平面粒子系统
• 分组