”粒子动画“ 这个词全球可能时时听到，那什么是粒子动画呢?

粒子是指原子、分子等组成物体的最小单元。在 2D 中，这种最小单元是像素，在 3D 中，最小单元是极点。

粒子动画不是指物体自己的动画，而是指这些基本单元的动画。因为是组成物体的单元的动画，是以会有打碎重组的效能。

本文咱们就来学习下 3D 的粒子动画，作念一个群星送福的效能：

3D 天下中，物体是由极点组成，3 个极点组成一个三角形，然后给三角形贴上不同的纹理，这么即是一个三维模子。

也即是说，3D 模子是由极点详情的几何体(Geometry)，贴上不同的纹理(Material)所组成的物体(Mesh 等)。

之后，把 3D 物体添加到场景(Scene)中，开采一个相机(Camera)角度去不雅察，然后用渲染器(Renderer)一帧帧渲染出来，这即是 3D 渲染进程。

3D 物体是由极点组成，那让这些极点动起来即是粒子动画了，因为基本粒子动了，当然就会有打碎重组的效能。

在“群星送福”效能中，咱们由群星打碎重组成了福字，实质上即是群星的极点领会到了福字的极点，由一个 3D 物体造成了另一个 3D 物体。

那么群星的极点从何处来的?福字的极点又如何来呢?

群星的极点其实是就地生成的不同位置的点，在这些点上贴上星星的贴图，即是群星效能。

福字的极点是加载的一个 3D 模子，瓦解出它的极点数据拿到的。

有了两个 3D 物体的极点数据，也即是有了动画的驱动纵脱坐标，那么不休的修改每个极点的 x、y、z 属性就不错竣事粒子动画。

这里的 x、y、z 属性值的变化不要我方算，用一些动画库来算，它们复旧加快、减慢等工夫函数。Three.js 的动画库是 Tween.js。

总之，3D 粒子动画即是极点的 x、y、z 属性的变化，会用动画库来筹画中间的属性值。由一个物体的极点位置、领会到另一个物体的极点位置，会有种打碎重组的效能，这亦然粒子动画的魔力。

想路理清了，那咱们来具体写下代码吧。

如前边所说，3D 的渲染需要一个场景(Scene)来科罚通盘的 3D 物体，需要一个相机(Camera)在不同角度不雅察，还需要渲染器(Renderer)一帧帧渲染出来。

这部分是基础代码，先把这部分写好：

创建场景：

const 平博炸金花scene = new THREE.Scene(); 

创建相机：

const width = window.innerWidth; const height = window.innerHeight; const camera = new THREE.PerspectiveCamera(45， width / height， 0.1， 1000); 

相机分为透视相机和平行相机，咱们这里用的透视相机，也即是近大远小的透视效能。要指定不错看到的视线角度(45)、宽高比(width/height)、遐迩范围(0.1 到 1000)这 3 种参数。

退换下相机的位置和不雅察标的：

camera.position.set(100， 0， 400); camera.lookAt(scene.position); 

然后是渲染器：

const renderer = new THREE.WebGLRenderer(); renderer.setSize(width， height); document.body.appendChild(renderer.domElement); 

渲染器要通过 requestAnimationFrame 来一帧帧的渲染：

function render() {     renderer.render(scene， camera);     requestAnimationFrame(render); } render(); 

准备职责完成，接下来即是绘图星空、福字这两种 3D 物体，皇冠账号还有竣事粒子动画了。

星空不是正方体、圆柱体这种规矩的几何体，而是由一些就地的极点组成的，这种恣意的几何体使用缓冲几何体 BufferGeometry 创建。

皇冠体育

为啥这种由恣意极点组成的几何体叫缓冲几何体呢?

接下来，中国女排仍可通过世界排名获得巴黎奥运会的参赛席位。根据规则，除东道主法国及资格赛直通的球队外，仍有5支球队可通过2024年6月17日的国际排联世界排名获得巴黎奥运会参赛资格。

因为极点在被 GPU 渲染之前是放在缓冲区 buffer 中的，是以这种指定一堆极点的几何体就被叫作念 BufferGeometry。

咱们创建 30000 个就地极点：

const vertices = []; for ( let i = 0; i < 30000; i ++ ) {     const x = THREE.MathUtils.randFloatSpread( 2000 );     const y = THREE.MathUtils.randFloatSpread( 2000 );     const z = THREE.MathUtils.randFloatSpread( 2000 );     vertices.push( x， y， z ); } 

这里用了 Three.js 提供的器具 MathUtils 来生成 0 到 2000 的就地值。

然后用这些极点创建 BufferGeometry：

const geometry = new THREE.BufferGeometry(); geometry.setAttribute( 'position'， new THREE.Float32BufferAttribute(vertices， 3)); 

给 BufferGeometry 对象开采极点位置，指定 3 个数值(x、y、z)为一个坐标。

然后创建这些极点上的材质(Material)，也即是星星的贴图：

const star = new THREE.TextureLoader().load('img/star.png'); const material = new THREE.PointsMaterial( { size: 10， map: star }); 

极点有了，材质有了，就不错创建 3D 物体了(这里的 3D 物体是 Points)。

const points = new THREE.Points( geometry， material ); scene.add(points); 

看下渲染的效能：

静态的没 3D 的嗅觉，咱们让每一帧转一下，改下 render 逻辑：

function render() {     renderer.render(scene， camera);     scene.rotation.y += 0.001;      requestAnimationFrame(render); } 

再来看一下：

3D 星空的嗅觉有了!

接下来咱们来作念粒子动画：

3D 粒子动画即是极点的动画，也即是 x、y、z 的变化。

咱们先来竣事个最浅易的效能，让群星都领会到 0，0，0 的位置：

肇始点坐标即是群星的的蓝本的位置，通过 getAttribute('position') 来取。动画过程使用 tween.js 来筹画：

const startPositions = geometry.getAttribute('position');  for(let i = 0; i< startPositions.count; i++) {     const tween = new TWEEN.Tween(positions);      tween.to({         [i * 3]: 0，         [i * 3 + 1]: 0，         [i * 3 + 2]: 0     }， 3000 * Math.random());      tween.easing(TWEEN.Easing.Exponential.In);     tween.delay(3000);     tween.onUpdate(() => {         startPositions.needsUpdate = true;     });          tween.start(); } 

每个点都有 x、y、z 坐标，也即是下标为 i3、i3+1、i*3+2 的值，咱们指定从群星的肇始位置领会到 0，0，0 的位置。

然后指定了工夫函数为加快(Easing.Exponential.In)，3000 ms 后驱动实施动画。

每一帧渲染的时候要调用下 Tween.update 来筹画最新的值：

function render() {     TWEEN.update();     renderer.render(scene， camera);     scene.rotation.y += 0.001;      requestAnimationFrame(render); } 

每一帧在绘图的时候都会调用 onUpdate 的回调函数，咱们在回调函数里把 positions 的 needsUpdate 开采为 true，即是告诉 tween.js 在这一帧要更新为新的数值再渲染了。

第一个粒子动画完成!

来看下效能(我把这个效能叫作念万象天引)：

通盘的星星粒子都皆集到了一个点，这即是粒子动画典型的打碎重组感。

接下来，唯一把粒子领会到福字的极点即是咱们要作念的“群星送福”效能了。

福字模子的极点信服不可就地，我方画也不履行，这种一般都是在建模软件里画好，然后导入到 Three.js 来渲染，

我找了这么一个福字的 3D 模子：

模子是 fbx 顺序的，使用 FBXLoader 加载：

const loader = new THREE.FBXLoader(); loader.load('./obj/fu.fbx'， function (object) {     const destPosition = object.children[0].geometry.getAttribute('position');  }); 

回调参数即是从 fbx 模子加载的 3D 物体，它是一个 Group(多个 3D 物体的围聚)，取出第 0 个元素的 geometry 属性，即是对应的几何体。

这么，咱们就拿到了认识的极点位置。

把粒子动画的纵脱位置改为福字的极点就不错了：

const cur = i % destPosition.count; tween.to({     [i * 3]: destPosition.array[cur * 3]，     [i * 3 + 1]: destPosition.array[(cur * 3 + 1)]，     [i * 3 + 2]: destPosition.array[(cur * 3 + 2)] }， 3000 * Math.random()); 

若是驱动极点位置比拟多，跳跃的部分从 0 的位置再来，是以要取余。

大功顺利!

这即是咱们想要的粒子效能：

竣工代码上传到了 github：https://github.com/QuarkGluonPlasma/threejs-exercize

粒子动画是组成物体的基本单元的领会，对 3D 来说即是极点的领会。

咱们要竣事“群星送福”的粒子动画，也即是从群星的极点领会到福字的极点。

群星的极点不错就地生成，使用 BufferGeometry 创建对应的几何体。福字则是加载创建好的 3D 模子，拿到其中的极点位置。

有了驱动、纵脱位置，就不错竣事粒子动画了，过程中的 x、y、z 值使用动画库 Tween.js 来筹画，不错指定加快、减慢等工夫函数。

粒子动画有种打碎重组的嗅觉，不错用来作念一些很炫的效能。暴露了什么是粒子动画、粒子动画中动的是什么，就算是初步掌持了。

我摘下漫天繁星，给全球送一份福分，新的一年一齐加油!