Three.js 银河星系效果
提示词
使用 Three.js 创建银河星系效果,粒子围绕中心螺旋分布,使用 GUI 控制参数。
效果描述
这是一个展示如何创建银河星系效果的示例,粒子围绕中心螺旋分布。
效果特性
- 银河星系:创建 250000 个粒子
- 螺旋分布:粒子围绕中心螺旋分布
- 分支结构:粒子分为多个分支
- 颜色渐变:粒子颜色从内到外渐变
- GUI 控制:使用 GUI 控制参数
- 纹理贴图:使用星形纹理
核心参数
| 参数 |
值 |
说明 |
| 粒子数量 |
250000 |
粒子总数 |
| 分支数量 |
6 |
星系分支数 |
| 分支半径 |
5 |
分支半径 |
| 旋转角度 |
0.2 |
旋转角度 |
| 内颜色 |
#ff812e |
内部颜色 |
| 外颜色 |
#a668ff |
外部颜色 |
核心代码解析
生成银河
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
47
48
49
const generateGalaxy = () => {
if (points) {
geometry.dispose();
material.dispose();
scene.remove(points);
}
const positions = new Float32Array(params.particleCount * 3);
const colors = new Float32Array(params.particleCount * 3);
const innerColor = new THREE.Color(params.innerColor);
const outerColor = new THREE.Color(params.outerColor);
for (let i = 0; i < params.particleCount; i++) {
const i3 = i * 3;
const radius = params.branchRadius * Math.random();
const branchAngle = ((i % params.branches) / params.branches) * Math.PI * 2;
const spinAngle = params.spin * radius * Math.PI * 2;
const randRadius = Math.random() * params.radialRandomness * radius;
const { x: randX, y: randY, z: randZ } = getRandomPolarCoordinate(randRadius);
positions[i3] = radius * Math.cos(branchAngle + spinAngle) + randX;
positions[i3 + 1] = randY;
positions[i3 + 2] = radius * Math.sin(branchAngle + spinAngle) + randZ;
const mixedColor = innerColor.clone().lerp(outerColor, radius / params.branchRadius);
colors[i3] = mixedColor.r;
colors[i3 + 1] = mixedColor.g;
colors[i3 + 2] = mixedColor.b;
}
material = new THREE.PointsMaterial({
size: params.particleSize,
sizeAttenuation: true,
depthWrite: false,
blending: THREE.AdditiveBlending,
vertexColors: true,
map: particleTexture,
transparent: true,
});
geometry = new THREE.BufferGeometry();
geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));
points = new THREE.Points(geometry, material);
scene.add(points);
};
随机极坐标
const getRandomPolarCoordinate = (radius) => {
const theta = Math.random() * Math.PI * 2;
const phi = Math.random() * Math.PI * 2;
const x = radius * Math.sin(theta) * Math.cos(phi);
const y = radius * Math.sin(theta) * Math.sin(phi);
const z = radius * Math.cos(theta);
return { x, y, z };
}
技术亮点
- 银河星系:创建银河星系效果
- 螺旋分布:粒子围绕中心螺旋分布
- 分支结构:粒子分为多个分支
- 颜色渐变:粒子颜色从内到外渐变
- GUI 控制:使用 GUI 控制参数
调试技巧
- 粒子数量:调整粒子数量测试性能
- 分支数量:调整分支数量改变结构
- 旋转角度:调整旋转角度改变螺旋
- 颜色渐变:调整颜色渐变参数
- 随机性:调整随机性参数
扩展方向
- 多层银河:创建多层银河效果
- 不同形状:使用不同的星系形状
- 动画效果:添加旋转动画
- 交互控制:添加更多交互控制
- 复杂结构:创建更复杂的星系结构
本文档由 ThreeLab 编辑整理,如需转载,请注明出处。
💬 评论区
评论功能即将上线,敬请期待!