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 编辑整理,如需转载,请注明出处。