银河漩涡效果

Three.js 银河漩涡效果着色器 | 三维可视化 / AI 提示词
📋 AI 提示词
prompt
1
创建一个银河漩涡效果着色器,包含星星、星云和螺旋臂效果,支持漩涡强度、旋转速度调节,提供三种银河颜色类型。
🖼️ 效果预览
🎮 案例演示
效果描述
这是一个模拟银河系漩涡结构的视觉效果,通过多层漩涡场、星星粒子和星云效果创造壮观的星系景观。
效果特性
- 多层漩涡场:3层不同参数的漩涡叠加
- 星星粒子系统:30个动态星星粒子
- 星云效果:5个大型星云团
- 螺旋臂:可调节的螺旋臂效果
- 三种银河类型:紫色、蓝色、绿色银河可选
参数调节
| 参数 | 默认值 | 范围 | 说明 |
|---|---|---|---|
| 漩涡强度 | 0.8 | 0.1-1.2 | 漩涡的扭曲程度 |
| 旋转速度 | 0.6 | 0.1-1.0 | 银河旋转的速度 |
| 星星密度 | 0.7 | 0.1-1.0 | 星星的密度 |
| 发光强度 | 1.2 | 0.1-1.8 | 整体发光强度 |
| 螺旋臂 | 0.7 | 0.1-1.0 | 螺旋臂的明显程度 |
| 显示星云 | true | boolean | 是否显示星云效果 |
核心代码解析
顶点着色器
glsl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
uniform float uTime;
uniform float uVortexStrength;
uniform float uRotationSpeed;
uniform float uSpiralArms;
void main() {
vUv = uv;
vPosition = position;
vNormal = normal;
// 漩涡效果
float vortex = sin(position.x * 3.0 + uTime * uVortexStrength) *
cos(position.y * 4.0 + uTime * uVortexStrength * 0.8) *
sin(position.z * 3.0 + uTime * uVortexStrength * 0.6);
// 旋转效果
float rotation = sin(position.x * 5.0 + uTime * uRotationSpeed * 2.0) *
cos(position.z * 5.0 + uTime * uRotationSpeed * 2.0);
// 螺旋臂效果
float spiral = sin(position.x * uSpiralArms * 8.0) *
cos(position.y * uSpiralArms * 10.0);
vec3 newPosition = position + normal * (vortex + rotation * 0.5 + spiral * 0.3) * 0.2;
gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
}
银河漩涡效果
glsl
1
2
3
4
5
6
7
8
9
10
11
float galaxy(vec2 uv, float strength) {
float galaxyField = 0.0;
// 多层漩涡
galaxyField += sin(uv.x * 4.0 + uTime * 0.2) *
cos(uv.y * 6.0 + uTime * 0.3);
galaxyField += sin(uv.x * 6.0 + uTime * 0.4) *
cos(uv.y * 8.0 + uTime * 0.5) * 0.7;
galaxyField += sin(uv.x * 8.0 + uTime * 0.6) *
cos(uv.y * 10.0 + uTime * 0.7) * 0.4;
return galaxyField * strength;
}
星星效果
glsl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
float stars(vec2 uv, float density) {
float starField = 0.0;
for(int i = 0; i < 30; i++) {
vec2 starPos = vec2(
noise(vec2(float(i) * 0.123, 0.456)),
noise(vec2(float(i) * 0.456, 0.789))
);
float dist = distance(uv, starPos);
float starSize = noise(vec2(float(i) * 0.789, 0.123)) * 0.06 + 0.03;
float starLife = mod(uTime * 1.5 + float(i) * 8.0, 6.28);
float starIntensity = sin(starLife) * 0.6 + 0.4;
starField += exp(-dist * 40.0) * starIntensity * density;
}
return starField;
}
星云效果
glsl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
float nebula(vec2 uv, float intensity) {
if(!uShowNebula) return 0.0;
float nebulaField = 0.0;
for(int i = 0; i < 5; i++) {
vec2 nebulaPos = vec2(
noise(vec2(float(i) * 0.567, 0.234)),
noise(vec2(float(i) * 0.234, 0.567))
);
float dist = distance(uv, nebulaPos);
float nebulaSize = noise(vec2(float(i) * 0.345, 0.678)) * 0.3 + 0.2;
float nebulaLife = mod(uTime * 0.5 + float(i) * 10.0, 6.28);
float nebulaIntensity = sin(nebulaLife) * 0.4 + 0.6;
nebulaField += exp(-dist * 8.0) * nebulaIntensity * intensity;
}
return nebulaField;
}
Uniforms
javascript
1
2
3
4
5
6
7
8
9
10
uniforms: {
uTime: { value: 0.0 },
uVortexStrength: { value: 0.8 },
uRotationSpeed: { value: 0.6 },
uStarDensity: { value: 0.7 },
uGlowIntensity: { value: 1.2 },
uSpiralArms: { value: 0.7 },
uGalaxyType: { value: 0 },
uShowNebula: { value: true }
}
技术亮点
- 多层漩涡系统:3层不同参数的漩涡叠加创造复杂银河结构
- 星星闪烁:30个星星粒子带有独立的生命周期的闪烁
- 星云叠加:大型星云团使用更柔和的衰减创造烟雾效果
- 螺旋臂模拟:正弦函数组合模拟螺旋臂的弯曲
- 颜色渐变:三种银河颜色适合不同宇宙场景
调试技巧
- 漩涡强度:过高可能导致结构失真
- 星星数量:减少星星数量可显著提升性能
- 星云大小:调整星云size参数改变覆盖范围
- 旋转同步:漩涡和旋转速度需协调调整
- 颜色混合:可通过修改getGalaxyType创造混合色银河
扩展方向
- 棒旋星系:添加中心棒状结构
- 卫星星系:添加围绕主星系的小型卫星星系
- 星系碰撞:实现两个星系接近和合并的动画
- 恒星形成区:添加明亮的恒星形成区效果
- 黑洞效果:添加中心超大质量黑洞的引力透镜效果
本文档由 ThreeLab 编辑整理,专注 Three.js 着色器、Web 3D、GIS 可视化技术分享。如需转载,请注明出处。







京公网安备 11010502038735号
💬 评论区
评论功能即将上线,敬请期待!