»
（040）粒子动画喷射器尾部
本页面实现的是3D火箭喷射器的粒子动画。粒子系统中的粒子大小完全相同，但是颜色和位置可以不同。为了使得火箭喷射器的效果更逼真，咱们可以批量修改每一个粒子的颜色来达到喷射器的颜色效果。
下面是已经实现的火箭喷射效果的代码：
（桌面端浏览效果最佳）
背景图片来自https://polyhaven.com/a/rogland_clear_night，全球下载量50426次，图片遵守CC0协议，CC0协议不具有传染性。
// 1、画圆形路径（弧形）
// let shape = new THREE.Shape();
// shape.moveTo(0, 0); // 移动到圆心
// shape.absarc(0, 0, 5, 0, Math.PI, false); // 绘制圆弧，半径为5//false：顺时针画面:否
// shape.absarc(0, 0, 5, Math.PI, Math.PI/2, false); // 相同方向绘制圆弧，以闭合形状
// //shape.closePath();//闭合曲线
var circleRadius = 5;
var circleShape = new THREE.Shape();
circleShape.moveTo( 0, circleRadius );
var delta=5.0*4/3*Math.tan(Math.PI/2/4);//三阶贝塞尔曲线画圆delta计算公式：delta=r*4/3*tan(θ/4)
circleShape.bezierCurveTo( delta, circleRadius, circleRadius, delta, circleRadius, 0 );
circleShape.bezierCurveTo( circleRadius, -delta, delta, -circleRadius, 0, -circleRadius );
circleShape.bezierCurveTo( -delta, -circleRadius, -circleRadius, -delta, -circleRadius, 0 );
circleShape.bezierCurveTo( -circleRadius, delta, -delta, circleRadius, 0, circleRadius );
circleShape.closePath();//闭合曲线
// 2、挤出以及倒角配置
var extrudeSettings = {
steps: 1,//挤出体细分
depth: 376,//挤出体深度
bevelEnabled: true,//是否为倒角
bevelThickness: 2,//倒角厚度
bevelSize: 2,//倒角大小
bevelSegments: 32,//倒角分段层数
curveSegments:100,//曲线细分数
// extrudePath: curvePath//挤出路径
};
var geometry = new THREE.ExtrudeGeometry( circleShape, extrudeSettings );//应用挤出几何体
var roketBodyPart = new THREE.Mesh( geometry, redIronMaterial );//将几何体与材质合成多面体Mesh
roketBodyPart.rotation.x = - Math.PI/2;//沿x轴平面旋转90度
scene.add( roketBodyPart );
//以下生成粒子系统Points，用于创建火箭喷射的粒子效果
particleCount = 100000;//粒子数
particles = new THREE.BufferGeometry();//粒子缓存
positions = new Float32Array(particleCount * 3);//粒子位置数组
colors = new Float32Array(particleCount * 4);//粒子颜色数组，rgba，每第4位为透明度
// sizes = new Float32Array(particleCount);//粒子大小数组，不支持此属性
// opacities = new Float32Array(particleCount);//粒子透明度数组，不支持此属性
for (let i = 0; i < particleCount; i++) {
let theta = 2*Math.PI*Math.random();//圆角度
let random=Math.random();
positions[i * 3 + 1] = - (1-random) * 62;//Z轴高度
let maxRadius = 14/Math.PI*2*Math.atan(1+positions[i * 3 + 1]/62);//圆最大半径，atan画喷射火焰
let radius = 14*Math.random();//随机半径
if(radius>maxRadius){//超出atan范围，则重新计算
--i;
continue;
}
positions[i * 3 + 0] = radius*Math.sin(theta);//x坐标
positions[i * 3 + 2] = radius*Math.cos(theta);//y坐标
// particleSizes.push(positions[i * 3 + 1]/(-62.0)*0.5)
colors[i*3+0]=radius/14;
colors[i*3+1]=170.0/255;
colors[i*3+2]=1.0;
// sizes[i]=positions[i * 3 + 1]/(-62.0);//不支持此属性
// opacities[i]=0.8*(1-radius/maxRadius);//不支持此属性
}
// 让粒子系统进入稳态
for(let j=0;j<380;j++){
++frameCount;
for (let i = 0; i < particleCount; i++) {
positions[i * 3 + 1] -=5.0;//Z轴高度减少（向下移动）
let maxRadius = 14/Math.PI*2*Math.atan(1+positions[i * 3 + 1]/62);//圆最大半径，atan画喷射火焰形状
let radius = Math.sqrt(positions[i * 3 + 0]*positions[i * 3 + 0] + positions[i * 3 + 2]*positions[i * 3 + 2]);//y坐标
if(radius>maxRadius||positions[i*3+1]<=-61.999||radius>7.0){
positions[i * 3 + 1] +=72*distanceAmplifyingRate;//Z轴高度减少（向下移动）
if(frameCount/6%10<1){
positions[i * 3 + 1] = positions[i*3 + 1]+72*distanceAmplifyingRate*(1.0-Math.sin(Math.random()*Math.PI));//粒子的位置做一个随机数的聚集
}
maxRadius = 14/Math.PI*2*Math.atan(1+positions[i * 3 + 1]/62);//圆最大半径，atan画喷射火焰形状
radius=maxRadius*Math.random();
let theta = 2*Math.PI*Math.random();//圆角度
positions[i * 3 + 0] = radius*Math.sin(theta);//x坐标
positions[i * 3 + 2] = radius*Math.cos(theta);//y坐标
}
var rgb=1.0;
var alpha=1.0-1.0*radius/maxRadius;
if(positions[i*3+1]>0){
alpha=0;
}
colors[i*4+0]=rgb;
colors[i*4+1]=rgb;
colors[i*4+2]=rgb;
colors[i*4+3]=alpha;
}
}
particles.setAttribute('position', new THREE.BufferAttribute(positions, 3));
particles.setAttribute('color', new THREE.BufferAttribute(colors, 4));
// particles.setAttribute('opacity',new THREE.BufferAttribute(opacities, 1));//不支持此属性的设置
// particles.setAttribute('size', new THREE.Float32BufferAttribute(sizes, 1));//不支持此属性的设置
const particleMaterial = new THREE.PointsMaterial({
color: 0xeeeeff,
size: 0.1,//实际绘制时最小为物理像素1像素
transparent: true,
opacity: 1.0,
sizeAttenuation:true,//近处大、远处小效果
vertexColors:true,//每个顶点的颜色可控
});
particleSystem = new THREE.Points(particles, particleMaterial);//材质只能用粒子材质
scene.add(particleSystem);
制作火箭。首先，我们需要实现圆角的圆柱体，一定要长，不然，不像火箭。
也就是一个圆面通过长距离挤出以及倒角得到一个圆角的圆柱体。
而后，使用atan函数来实现粒子物体中的粒子位置得到控制。用atan函数的原因，是因为，那样更像火箭喷射的火焰长尾。
需要注意的是等速率的粒子移动，当帧数不够的时候，无法在动画上表现出粒子的快速移动。因为，粒子的跳格具有相同性。要想表现喷射器喷射的效果，就要在动画上制作出断续的急促喷射。页面上就不写了，看HTML源文件吧。
另外，需要注意的是：粒子的最小尺寸是1个物理像素。所以，对于粒子系统的缩放，缩小到一定尺寸后，粒子是无法再缩小的，所以，对于粒子系统的缩放，需要考虑的是分散和隐藏不使用的粒子点，从而达到粒子系统物体的缩放后还能保持想要的效果。
2024.11.13这次修改后的效果已经达到相对比较成熟，需要代码的看页面源代码，转载请注明出处，万分感谢。
上上次的修改实现了通过三级贝塞尔曲线圆面的绘制，效果很好，当然，计算公式很重要，为CALC点赞👍
————www.v-signon.com学习者共勉