波纹扫描效果

🎯 提示词

PROMPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
使用 Three.js 实现【波纹扫描效果】,具体要求:

【核心特效】
- 圆形波纹扩散动画
- 多层波纹叠加效果
- 纹理采样增强细节

【场景与光照】
- 深蓝色背景
- 平面几何体水平放置
- 添加混合模式发光

【交互与控制】
- OrbitControls 视角控制
- GUI 颜色控制器

【技术要求】
- Three.js 版本
- 自定义 ShaderMaterial
- 纹理加载与采样

📖 效果拆解

层次 视觉效果 技术实现
基础 平面几何体 PlaneGeometry
核心特效 圆形波纹动画 距离场 + 时间偏移
增强细节 纹理采样 TextureLoader + 重复纹理
交互控制 颜色调整 lil-gui 颜色控制器

🔧 核心技术点

1. 圆形波纹算法

计算波纹扩散效果:

GLSL
1
2
3
4
5
6
7
8
9
10
// 计算圆形波纹效果
float circleWave(vec3 p, vec3 origin, float distRatio) {
    float t = uTime;
    float dist = distance(p, origin) * distRatio;  // 计算到原点的距离
    float radialMove = fract(dist - t);            // 创建随时间移动的波纹
    float fadeOutMask = 1.0 - smoothstep(1.0, 3.0, dist);  // 波纹衰减
    radialMove *= fadeOutMask;
    float cutInitialMask = 1.0 - step(t, dist);    // 控制波纹从中心扩展
    return radialMove * cutInitialMask;
}

2. 波纹颜色计算

结合纹理和波纹效果:

GLSL
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
vec3 getScanColor(vec3 worldPos, vec2 uv, vec3 col) {
    // 从纹理采样
    float scanMask = texture2D(uScanTex, uv).r;
    
    // 计算两种不同速度的波纹
    float cw = circleWave(worldPos, uScanOrigin, uScanWaveRatio1);
    float cw2 = circleWave(worldPos, uScanOrigin, uScanWaveRatio2);
    
    // 创建波纹遮罩
    float mask1 = smoothstep(0.3, 0.0, 1.0 - cw);
    mask1 *= (1.0 + scanMask * 0.7);
    
    float mask2 = smoothstep(0.07, 0.0, 1.0 - cw2) * 0.8;
    mask1 += mask2;
    
    // 边缘高亮
    float mask3 = smoothstep(0.09, 0.0, 1.0 - cw) * 1.5;
    mask1 += mask3;

    // 混合颜色
    vec3 scanCol = mix(uScanColorDark, uScanColor, mask1);
    return scanCol * mask1;
}

3. 纹理配置

设置纹理重复模式:

JAVASCRIPT
1
2
3
4
5
6
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load("/threeExamples/shader/shader-simple/wave.png");

// 设置纹理重复
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;

💡 调试与优化

问题类型 表现形式 解决方案
纹理加载失败 波纹无细节 检查纹理路径
波纹异常 波纹不扩散 检查时间变量更新
性能问题 帧率下降 减少纹理分辨率
颜色异常 颜色混合不正确 调整颜色混合参数

🚀 扩展思路

变体效果 核心改动 难度
多点波纹 添加多个波纹原点 ⭐⭐
波纹碰撞 添加波纹间干涉效果 ⭐⭐⭐
动态颜色 波纹颜色随时间变化 ⭐⭐
鼠标交互 鼠标点击产生波纹 ⭐⭐

本文档由 ThreeLab 编辑整理,如需转载,请注明出处。