圆波扫光

Three.js 波纹扫描效果 | 三维可视化 / AI 提示词
📋 AI 提示词
prompt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
使用 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
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
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load("/threeExamples/shader/shader-simple/wave.png");
// 设置纹理重复
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
💡 调试与优化
| 问题类型 | 表现形式 | 解决方案 |
|---|---|---|
| 纹理加载失败 | 波纹无细节 | 检查纹理路径 |
| 波纹异常 | 波纹不扩散 | 检查时间变量更新 |
| 性能问题 | 帧率下降 | 减少纹理分辨率 |
| 颜色异常 | 颜色混合不正确 | 调整颜色混合参数 |
🚀 扩展思路
| 变体效果 | 核心改动 | 难度 |
|---|---|---|
| 多点波纹 | 添加多个波纹原点 | ⭐⭐ |
| 波纹碰撞 | 添加波纹间干涉效果 | ⭐⭐⭐ |
| 动态颜色 | 波纹颜色随时间变化 | ⭐⭐ |
| 鼠标交互 | 鼠标点击产生波纹 | ⭐⭐ |
本文档由 ThreeLab 编辑整理,如需转载,请注明出处。







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