
Three.js 全息投影效果着色器 | 三维可视化 / AI 提示词
📋 AI 提示词
prompt
1
创建一个科幻风格的全息投影效果着色器,包含扫描线、数据流、网格效果,支持三种全息颜色类型。
🖼️ 效果预览
🎮 案例演示
效果描述
这是一个科幻风格的全息投影效果,通过多层正弦波叠加创造数据流动感,配合扫描线和网格效果营造未来科技感。
效果特性
- 多层全息投影:3层不同频率的全息场叠加
- 数据点效果:动态生成和移动的数据点
- 网格扫描线:水平扫描线和垂直网格叠加
- 三种颜色类型:绿色、蓝色、紫色全息可选
- 发光脉冲:全息投影的发光脉冲动画
参数调节
| 参数 | 默认值 | 范围 | 说明 |
|---|---|---|---|
| 投影强度 | 0.9 | 0.1-1.2 | 全息投影的强度 |
| 扫描频率 | 0.8 | 0.1-1.0 | 扫描线的移动频率 |
| 数据密度 | 0.7 | 0.1-1.0 | 数据点的密度 |
| 发光强度 | 1.3 | 0.1-1.8 | 全息发光强度 |
| 数据流 | 0.6 | 0.1-0.9 | 数据流动的速度 |
| 显示网格 | 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 uProjectionIntensity;
uniform float uScanFrequency;
uniform float uDataStream;
void main() {
vUv = uv;
vPosition = position;
vNormal = normal;
// 全息投影效果
float projection = sin(position.x * 3.0 + uTime * uProjectionIntensity) *
cos(position.y * 4.0 + uTime * uProjectionIntensity * 0.8) *
sin(position.z * 3.0 + uTime * uProjectionIntensity * 0.6);
// 扫描频率
float scan = sin(position.x * 5.0 + uTime * uScanFrequency * 2.0) *
cos(position.z * 5.0 + uTime * uScanFrequency * 2.0);
// 数据流效果
float data = sin(position.x * uDataStream * 6.0) *
cos(position.y * uDataStream * 8.0);
vec3 newPosition = position + normal * (projection + scan * 0.5 + data * 0.3) * 0.15;
gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
}
全息投影效果
glsl
1
2
3
4
5
6
7
8
9
10
11
float holographicProjection(vec2 uv, float intensity) {
float hologramField = 0.0;
// 多层全息投影
hologramField += sin(uv.x * 4.0 + uTime * 0.3) *
cos(uv.y * 6.0 + uTime * 0.5);
hologramField += sin(uv.x * 6.0 + uTime * 0.7) *
cos(uv.y * 8.0 + uTime * 0.9) * 0.7;
hologramField += sin(uv.x * 8.0 + uTime * 1.1) *
cos(uv.y * 10.0 + uTime * 1.3) * 0.4;
return hologramField * intensity;
}
全息数据点效果
glsl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
float hologramData(vec2 uv, float density) {
float dataField = 0.0;
for(int i = 0; i < 20; i++) {
vec2 dataPos = vec2(
noise(vec2(float(i) * 0.234, 0.567)),
noise(vec2(float(i) * 0.567, 0.891))
);
float dist = distance(uv, dataPos);
float dataSize = noise(vec2(float(i) * 0.891, 0.234)) * 0.04 + 0.02;
float dataLife = mod(uTime * 1.8 + float(i) * 10.0, 6.28);
float dataIntensity = sin(dataLife) * 0.7 + 0.3;
dataField += exp(-dist * 50.0) * dataIntensity * density;
}
return dataField;
}
Uniforms
javascript
1
2
3
4
5
6
7
8
9
10
uniforms: {
uTime: { value: 0.0 },
uProjectionIntensity: { value: 0.9 },
uScanFrequency: { value: 0.8 },
uHologramDensity: { value: 0.7 },
uGlowIntensity: { value: 1.3 },
uDataStream: { value: 0.6 },
uHologramType: { value: 0 },
uShowGrid: { value: true }
}
技术亮点
- 多层场叠加:3层不同参数的全息场叠加创造复杂效果
- 噪声函数:使用噪声函数生成伪随机数据点位置
- 指数衰减:数据点使用指数衰减创造光晕效果
- 扫描线动画:sin函数创造水平扫描线效果
- 加法混合:AdditiveBlending创造发光叠加效果
调试技巧
- 颜色选择:不同全息类型适合不同科幻场景
- 数据密度:减少数据点数量可提升性能
- 扫描频率:过高频率可能产生视觉疲劳
- 网格可见性:复杂场景可关闭网格提升性能
- 旋转速度:通过scanFrequency控制旋转速度
扩展方向
- 全息字符:添加文字投影到全息效果中
- 交互式全息:支持鼠标/键盘控制全息显示内容
- 全息扫描仪:实现扫描物体生成全息模型
- 远程全息:实现两个用户间的全息视频通话
- 多全息投影:多个全息投影组合成复杂场景
本文档由 ThreeLab 编辑整理,专注 Three.js 着色器、Web 3D、GIS 可视化技术分享。如需转载,请注明出处。







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