Three.js 随机粒子效果
提示词
使用 Three.js 创建随机粒子效果,使用 Simplex 4D 噪声实现粒子运动,结合 ShaderMaterial 实现自定义着色器。
效果描述
这是一个展示如何创建随机粒子效果的示例,使用 Simplex 4D 噪声实现粒子运动。
效果特性
- 随机粒子:创建 1000 个随机粒子
- Simplex 噪声:使用 Simplex 4D 噪声
- 自定义着色器:使用 ShaderMaterial
- 粒子运动:粒子基于噪声运动
- 圆柱分布:粒子在圆柱体内分布
- 透明度动画:粒子透明度动画
核心参数
| 参数 |
值 |
说明 |
| 粒子数量 |
1000 |
粒子总数 |
| 圆柱半径 |
5 |
圆柱半径 |
| 圆柱高度 |
10 |
圆柱高度 |
| 粒子速度 |
0.2-0.6 |
粒子运动速度 |
| 粒子相位 |
随机 |
粒子相位 |
| 粒子半径 |
随机 |
粒子分布半径 |
核心代码解析
Simplex 4D 噪声
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,
0.309016994374947451);
vec4 i = floor(v + dot(v, C.yyyy) );
vec4 x0 = v - i + dot(i, C.xxxx);
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;
}
创建粒子
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);
}
}
技术亮点
- Simplex 噪声:使用 Simplex 4D 噪声
- 自定义着色器:使用 ShaderMaterial
- 粒子运动:粒子基于噪声运动
- 圆柱分布:粒子在圆柱体内分布
- 透明度动画:粒子透明度动画
调试技巧
- 粒子数量:调整粒子数量测试性能
- 噪声参数:调整噪声参数改变运动
- 粒子速度:调整粒子运动速度
- 圆柱参数:调整圆柱参数改变分布
- 着色器:调整着色器参数
扩展方向
- 更多噪声:使用不同类型的噪声
- 复杂运动:实现更复杂的粒子运动
- 颜色变化:添加粒子颜色变化
- 交互控制:添加交互控制
- 多种分布:使用不同的粒子分布方式
本文档由 ThreeLab 编辑整理,如需转载,请注明出处。
💬 评论区
评论功能即将上线,敬请期待!