Three.js 随机粒子效果

提示词

PROMPT
1
使用 Three.js 创建随机粒子效果,使用 Simplex 4D 噪声实现粒子运动,结合 ShaderMaterial 实现自定义着色器。

效果描述

这是一个展示如何创建随机粒子效果的示例,使用 Simplex 4D 噪声实现粒子运动。

效果特性

  • 随机粒子:创建 1000 个随机粒子
  • Simplex 噪声:使用 Simplex 4D 噪声
  • 自定义着色器:使用 ShaderMaterial
  • 粒子运动:粒子基于噪声运动
  • 圆柱分布:粒子在圆柱体内分布
  • 透明度动画:粒子透明度动画

核心参数

参数 说明
粒子数量 1000 粒子总数
圆柱半径 5 圆柱半径
圆柱高度 10 圆柱高度
粒子速度 0.2-0.6 粒子运动速度
粒子相位 随机 粒子相位
粒子半径 随机 粒子分布半径

核心代码解析

Simplex 4D 噪声

GLSL
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
float snoise(vec4 v){
    const vec2  C = vec2( 0.138196601125010504,  // (5 - sqrt(5))/20  G4
                          0.309016994374947451); // (sqrt(5) - 1)/4   F4
    // First corner
    vec4 i  = floor(v + dot(v, C.yyyy) );
    vec4 x0 = v -   i + dot(i, C.xxxx);
    
    // Other corners
    vec4 i0;
    vec3 isX = step( x0.yzw, x0.xxx );
    vec3 isYZ = step( x0.zww, x0.yyz );
    i0.x = isX.x + isX.y + isX.z;
    i0.yzw = 1.0 - isX;
    i0.y += isYZ.x + isYZ.y;
    i0.zw += 1.0 - isYZ.xy;
    i0.z += isYZ.z;
    i0.w += 1.0 - isYZ.z;
    
    // ... 更多噪声计算代码
}

创建粒子

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
class Particles extends THREE.Points {
    constructor(gu) {
        let particlePos = [];
        let particleAlpha = [];
        let g = new THREE.BufferGeometry()
            .setFromPoints(
                new Array(1000).fill().map((_) => {
                    particlePos.push(
                        Math.random() * 0.2 + 0.2,
                        Math.random() + 1,
                        Math.random(),
                        0
                    );
                    particleAlpha.push(
                        Math.random(),
                        Math.random() * 0.4 + 0.1,
                        0,
                        0
                    );

                    let r = 5;
                    return new THREE.Vector3().setFromCylindricalCoords(
                        Math.sqrt(r * r * Math.random()),
                        Math.random() * Math.PI * 2,
                        Math.random() * 10
                    );
                })
            )
            .setAttribute("particlePos", new THREE.Float32BufferAttribute(particlePos, 4))
            .setAttribute("particleAlpha", new THREE.Float32BufferAttribute(particleAlpha, 4));
        
        let m = new THREE.PointsMaterial({
            size: 0.5,
            transparent: true,
            opacity: 0.8,
            blending: THREE.AdditiveBlending,
            onBeforeCompile: (shader) => {
                shader.uniforms.time = gu.time;
                shader.vertexShader = noise + shader.vertexShader;
                // ... 更多着色器修改
            }
        });
        
        super(g, m);
    }
}

技术亮点

  1. Simplex 噪声:使用 Simplex 4D 噪声
  2. 自定义着色器:使用 ShaderMaterial
  3. 粒子运动:粒子基于噪声运动
  4. 圆柱分布:粒子在圆柱体内分布
  5. 透明度动画:粒子透明度动画

调试技巧

  1. 粒子数量:调整粒子数量测试性能
  2. 噪声参数:调整噪声参数改变运动
  3. 粒子速度:调整粒子运动速度
  4. 圆柱参数:调整圆柱参数改变分布
  5. 着色器:调整着色器参数

扩展方向

  1. 更多噪声:使用不同类型的噪声
  2. 复杂运动:实现更复杂的粒子运动
  3. 颜色变化:添加粒子颜色变化
  4. 交互控制:添加交互控制
  5. 多种分布:使用不同的粒子分布方式

本文档由 ThreeLab 编辑整理,如需转载,请注明出处。