白云

Three.js 白云效果 | 三维可视化 / AI 提示词
📋 AI 提示词
prompt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
使用 Three.js 实现逼真的白云效果,具体要求:
**核心特效**
- Raymarching 算法渲染体积云
- 多层噪声叠加创造云层深度
- 太阳光照散射效果
- 相机绕目标旋转动画
**场景与光照**
- 球体内侧作为天空盒
- 背向渲染 (BackSide)
- 模拟太阳方向光源
**交互与控制**
- OrbitControls 自由旋转
- 鼠标控制视角
**技术要求**
- Three.js 版本 (ES Module)
- 自定义 ShaderMaterial
- Raymarching 体积渲染
- 多层 FBM 噪声
🖼️ 效果预览
🎮 案例演示
📖 效果拆解
| 层次 | 视觉效果 | 技术实现 |
|---|---|---|
| 基础 | 天空球背景 | SphereGeometry + BackSide |
| 核心特效 | 体积云渲染 | Raymarching + 噪声采样 |
| 光照 | 太阳散射 | dif 因子计算光照衰减 |
| 动画 | 相机旋转 | mo.xy 控制相机位置 |
🔧 核心技术点
1. 多层噪声函数
为什么需要这个技术:单层噪声过于单调,多层叠加可以创造更自然的云层纹理。
glsl
1
2
3
4
5
6
7
8
9
10
float noise( in vec3 x ) {
vec3 p = floor(x);
vec3 f = fract(x);
f = f*f*(3.0-2.0*f);
float n = p.x + p.y*57.0 + 113.0*p.z;
return mix(mix(mix( hash(n+ 0.0), hash(n+ 1.0),f.x),
mix( hash(n+ 57.0), hash(n+ 58.0),f.x),f.y),
mix(mix( hash(n+113.0), hash(n+114.0),f.x),
mix( hash(n+170.0), hash(n+171.0),f.x),f.y),f.z);
}
2. Raymarching 体积渲染
为什么需要这个技术:在 ray 方向上步进采样,累积不透明度和颜色。
glsl
1
2
3
4
5
6
7
8
9
10
11
12
13
vec4 raymarch( in vec3 ro, in vec3 rd ) {
vec4 sum = vec4(0, 0, 0, 0);
float t = 0.0;
for(int i=0; i<64; i++) {
if( sum.a > 0.99 ) continue;
vec3 pos = ro + t*rd;
vec4 col = map( pos );
// 累积颜色和透明度
sum = sum + col*(1.0 - sum.a);
t += max(0.1, 0.025*t);
}
return clamp( sum, 0.0, 1.0 );
}
3. 体积云密度计算
为什么需要这个技术:结合地面高度和噪声生成有体积感的云层。
glsl
1
2
3
4
5
6
7
8
9
10
11
12
vec4 map( in vec3 p ) {
float d = 0.2 - p.y; // 地面高度
vec3 q = p - vec3(1.0,0.1,0.0)*iGlobalTime;
float f;
f = 0.5000*noise( q ); q = q*2.02;
f += 0.2500*noise( q ); q = q*2.03;
f += 0.1250*noise( q ); q = q*2.01;
f += 0.0625*noise( q );
d += 3.0 * f; // 叠加噪声
d = clamp( d, 0.0, 1.0 );
return vec4( d );
}
4. 光照散射计算
为什么需要这个技术:模拟太阳光穿过云层时的散射效果。
glsl
1
2
3
float dif = clamp((col.w - map(pos+0.3*sundir).w)/0.6, 0.0, 1.0 );
vec3 lin = vec3(0.65,0.68,0.7)*1.35 + 0.45*vec3(0.7, 0.5, 0.3)*dif;
col.xyz *= lin;
💡 调试与优化
| 问题类型 | 表现形式 | 解决方案 |
|---|---|---|
| 性能差 | 帧率低 | 减少 Raymarching 迭代次数 |
| 云层过厚 | 黑色无细节 | 降低 d 的初始值或噪声强度 |
| 闪烁 | 画面抖动 | 增加步进最小值 |
🚀 扩展思路
| 变体效果 | 核心改动 | 难度 |
|---|---|---|
| 乌云密布 | 降低环境光亮度 | ⭐ |
| 日落云霞 | 修改 sun 颜色和角度 | ⭐ |
| 动态云层 | 添加风场影响 | ⭐⭐ |
| 云层阴影 | 添加光线阴影计算 | ⭐⭐ |
| 立体云山 | 修改地面为地形 | ⭐⭐⭐ |
本文档由 ThreeLab 编辑整理,如需转载,请注明出处。







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