本页面实现的是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学习者共勉