
Three.js 星际旅行效果着色器 | 三维可视化 / AI 提示词
📋 AI 提示词
prompt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
使用 Three.js 实现**星际旅行效果着色器**,具体要求:
【核心特效】
- 多层曲速航行场叠加
- 星云粒子效果
- 时间膨胀视觉效果
- 三种旅行模式:曲速航行/虫洞旅行/超光速飞行
【场景与光照】
- 深蓝色宇宙背景 (#000066 → #000033 径向渐变)
- OrbitControls 轨道控制器
- 自定义着色器实现星际穿越感
【交互与控制】
- OrbitControls 鼠标拖拽旋转
- 鼠标滚轮缩放
- GUI 面板调节曲速、恒星密度、星云效果、时间膨胀等参数
【技术要求】
- Three.js 版本 (ES Module)
- 自定义顶点着色器实现顶点位移
- 自定义片元着色器实现星云和旅行效果
- lil-gui 参数控制
🖼️ 效果预览
🎮 案例演示
📖 效果拆解
| 层次 | 视觉效果 | 技术实现 |
|---|---|---|
| 基础 | 3D立方体几何体 | BoxGeometry (3×3×3) |
| 核心特效 | 多层曲速场叠加 | 片元着色器三层正弦余弦叠加 |
| 增强细节 | 星云粒子 | 20个噪声分布的星云团 |
| 交互控制 | 旅行模式切换 | 曲速/虫洞/超光速三种颜色 |
🔧 核心技术点
1. 多层曲速航行场
为什么需要这个技术:模拟宇宙飞船接近光速时的空间扭曲效果。
glsl
1
2
3
4
5
6
7
float interstellarTravel(vec2 uv, float speed) {
float travelField = 0.0;
travelField += sin(uv.x * 4.0 + uTime * 0.3) * cos(uv.y * 6.0 + uTime * 0.5);
travelField += sin(uv.x * 6.0 + uTime * 0.7) * cos(uv.y * 8.0 + uTime * 0.9) * 0.7;
travelField += sin(uv.x * 8.0 + uTime * 1.1) * cos(uv.y * 10.0 + uTime * 1.3) * 0.4;
return travelField * speed;
}
2. 星云粒子效果
为什么需要这个技术:模拟宇宙中星云的朦胧分布,增强太空感。
glsl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
float nebula(vec2 uv, float effect) {
float nebulaField = 0.0;
for(int i = 0; i < 20; i++) {
vec2 nebulaPos = vec2(
noise(vec2(float(i) * 0.123, 0.456)),
noise(vec2(float(i) * 0.456, 0.789))
);
float dist = distance(uv, nebulaPos);
float nebulaSize = noise(vec2(float(i) * 0.789, 0.123)) * 0.04 + 0.02;
float nebulaLife = mod(uTime * 1.5 + float(i) * 8.0, 6.28);
float nebulaIntensity = sin(nebulaLife) * 0.7 + 0.3;
nebulaField += exp(-dist * 45.0) * nebulaIntensity * effect;
}
return nebulaField;
}
3. 顶点曲速位移
为什么需要这个技术:让立方体表面产生空间扭曲的视觉效果。
glsl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
uniform float uWarpSpeed;
uniform float uStarDensity;
uniform float uTimeDilation;
void main() {
float warp = sin(position.x * 3.0 + uTime * uWarpSpeed) *
cos(position.y * 4.0 + uTime * uWarpSpeed * 0.8) *
sin(position.z * 3.0 + uTime * uWarpSpeed * 0.6);
float stars = sin(position.x * 5.0 + uTime * uStarDensity * 2.0) *
cos(position.z * 5.0 + uTime * uStarDensity * 2.0);
float dilation = sin(position.x * uTimeDilation * 6.0) *
cos(position.y * uTimeDilation * 8.0);
vec3 newPosition = position + normal * (warp + stars * 0.5 + dilation * 0.3) * 0.15;
gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
}
4. 旅行模式颜色系统
为什么需要这个技术:通过颜色区分不同的星际旅行方式。
glsl
1
2
3
4
5
6
7
8
9
vec3 getTravelType(int type) {
if(type == 0) {
return vec3(0.2, 0.6, 1.0); // 曲速航行 - 蓝色
} else if(type == 1) {
return vec3(0.8, 0.2, 1.0); // 虫洞旅行 - 紫色
} else {
return vec3(1.0, 0.8, 0.2); // 超光速飞行 - 金色
}
}
5. GUI 参数控制
为什么需要这个技术:让用户实时调节星际旅行的各种参数。
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const travelParams = {
warpSpeed: 0.8,
starDensity: 0.7,
nebulaEffect: 0.6,
glowIntensity: 1.2,
timeDilation: 0.8,
travelType: 0,
showStars: true
};
const gui = new GUI();
gui.add(travelParams, 'warpSpeed', 0, 1).name('曲速等级');
gui.add(travelParams, 'starDensity', 0, 1).name('恒星密度');
gui.add(travelParams, 'nebulaEffect', 0, 1).name('星云效果');
gui.add(travelParams, 'travelType', { '曲速航行': 0, '虫洞旅行': 1, '超光速飞行': 2 }).name('旅行模式');
💡 调试与优化
| 问题类型 | 表现形式 | 解决方案 |
|---|---|---|
| 星云闪烁过快 | 星云粒子闪烁频率高 | 减小 uTime * 1.5 的系数 |
| 曲速效果不明显 | 变形程度太小 | 增加顶点着色器的位移系数 |
| 性能问题 | 复杂场景帧率低 | 减少星云粒子数量 (20→10) |
| 颜色过渡不自然 | 旅行模式切换生硬 | 添加平滑的颜色过渡动画 |
🚀 扩展思路
| 变体效果 | 核心改动 | 难度 |
|---|---|---|
| 星空背景 | 添加真正的星空纹理或粒子系统 | ⭐⭐ |
| 虫洞效果 | 实现中心黑洞+边缘扭曲的虫洞效果 | ⭐⭐⭐ |
| 多物体组合 | 添加多个立方体或球体增加场景丰富度 | ⭐⭐ |
| 速度线 | 添加从中心向外扩散的速度线效果 | ⭐⭐ |
| 音效同步 | 配合引擎轰鸣声增强沉浸感 | ⭐⭐⭐ |
本文档由 ThreeLab 编辑整理,如需转载,请注明出处。







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