Threejs基础实现物体的粒子形态

所用到的知识

BufferGeometry：threejs.org/docs/index.…

PointsMaterial:threejs.org/docs/index.…

BufferAttribute：threejs.org/docs/index.…

Example:
threejs.org/examples/?q…

目标

将一个模型转化为粒子，然后可以设置粒子的变换形成炫酷的效果。

实现

1.我们需要一个模型
本篇中所用的的模型地址：
sketchfab.com/3d-models/c…

2.Threejs初始化

导入模型，使用gltfloader将其显示出来，不同格式的模型使用不同的loader。

3.那么我们怎么将物体变成一个个粒子呢？复杂模型是由一个个三角面构成的，而一个面是由三个顶点构成的，而将模型转变为粒子只需要获取其顶点位置，然后给其加上点材质就可以了。
我们console一下模型。发现这个模型是一个group，说明它是由很多个子mesh组成的。我们查看一下children。

直到我们看到它的attributes，其中normal为法线，position为顶点位置，
而position就是我们所需要的。

4.获取模型的attributes

function combineBuffer(model, bufferName) {

  let count = 0;

  model.traverse(function (child) {

    if (child.isMesh) {

      const buffer = child.geometry.attributes[bufferName];
      console.log(buffer)

      count += buffer.array.length;

    }

  });

  const combined = new Float32Array(count);

  let offset = 0;

  model.traverse(function (child) {

    if (child.isMesh) {

      const buffer = child.geometry.attributes[bufferName];

      combined.set(buffer.array, offset);
      offset += buffer.array.length;

    }

  });

  return new THREE.BufferAttribute(combined, 3);

}

上述代码来自于上面的example中，主要是遍历所有子元素，将其所有的所需要的属性取出来，位置信息有xyz，所以3个为一组。

5.接下来很简单，我们获取信息后，只需要创建一个buffergeometry，设置对应的属性就好了

  let cakevertices = combineBuffer(model.scene, 'position')
  let cakebuffer = new THREE.BufferGeometry()
  cakebuffer.setAttribute('position', cakevertices)

6.创建一个点材质，然后将材质赋予刚刚创建的buffergeometry。

var particleMaterial = new THREE.PointsMaterial({
  color: 0xffffff,
  size: 0.005,
  map: new THREE.TextureLoader().load(
    "https://threejs.org/examples/textures/sprites/disc.png"
  ),
  blending: THREE.AdditiveBlending,
  transparent: true,
  sizeAttenuation: true,
  depthTest: false,
});

由于蛋糕模型加载不出来，我换了马的可恶。可以在下面看看效果。

加点效果

我们可以把点材质换成RawShaderMaterial，自己书写着色器代码，控制点的运动和颜色的改变，形成炫酷的效果，下期更新QWQ。