Three.js 动态旋转同心圆着色器 | 三维可视化效果

🖼️ 效果预览

🎮 案例演示

📋 提示词

prompt 复制代码

使用 Three.js 实现【动态旋转同心圆着色器】，具体要求：

【核心特效】
- 多层同心圆动画
- 三角形噪声纹理
- 鼠标交互旋转
- 动态颜色变化

【场景与光照】
- 深色背景增强对比度
- 无需光源（自发光效果）

【交互与控制】
- OrbitControls 轨道控制器
- 鼠标位置影响旋转方向

【技术要求】
- Three.js 最新版本
- ShaderMaterial 自定义着色器
- 极坐标转换

📖 效果拆解

层次	视觉效果	技术实现
基础	全屏平面	PlaneGeometry(1, 1)
核心特效	同心圆图案	极坐标转换 + 正弦函数
增强细节	三角形噪声	多层噪声叠加
交互	鼠标控制	uniform 传递鼠标位置
颜色	动态调色板	余弦函数组合

🔧 核心技术点

1. 极坐标同心圆绘制

将笛卡尔坐标转换为极坐标，使用正弦函数创建脉冲同心圆效果。

glsl 复制代码

// 转换为极坐标
vec2 plr = vec2(lp, atan(p.y, p.x));

// 绘制同心圆，使用正弦函数创建脉冲效果
float rz = 1.0 - pow(
    abs(sin(plr.x * PI * NUM)) * 1.25 / pow(w, 0.25), 
    2.5 + sin(id * 10.0 + time) * 0.5
);

2. 三角形噪声生成

通过多层叠加三角形波形，创建复杂的纹理效果。

glsl 复制代码

// 三角形波形函数
float tri(in float x) {
    return abs(fract(x) - 0.5);
}

// 二维三角形噪声
float triangleNoise(in vec2 p) {
    float z = 1.5;
    float z2 = 1.5;
    float rz = 0.0;
    vec2 bp = p;
    
    for (float i = 0.0; i <= 3.0; i++) {
        vec2 dg = tri2(bp * 2.0) * 0.8;
        dg *= mm2(iTime * 0.3);
        p += dg / z2;
        bp *= 1.6;
        z2 *= 0.6;
        z *= 1.8;
        p *= 1.2;
        p *= m2;
        rz += (tri(p.x + tri(p.y))) / z;
    }
    return rz;
}

3. 颜色调色板函数

使用余弦函数组合生成平滑的动态颜色。

glsl 复制代码

#define PALETTE vec3(0.2, 1.6, 2.2) + 1.2

vec3 col = (sin(PALETTE + id * 5.0 + time + iColorOffset) * 0.5 + 0.5) * rz;

💡 调试与优化

问题类型	表现形式	解决方案
同心圆数量不足	图案稀疏	增加 `NUM` 常量值
性能问题	帧率下降	减少噪声迭代次数
颜色过渡生硬	色块明显	调整调色板参数或增加颜色混合
鼠标交互无响应	图案不随鼠标变化	检查 `iMouse` uniform 是否正确更新

🚀 扩展思路

变体效果	核心改动	难度
3D球体投影	将2D图案映射到球体表面	⭐⭐⭐
自定义调色板	添加 GUI 控制颜色参数	⭐⭐
音频响应	结合 Web Audio API 控制动画	⭐⭐⭐
分形扩展	增加分形迭代层数	⭐⭐⭐

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