Three.js ShaderMaterial实战：用两张贴图轻松搞定酷炫墙体流光（附完整代码）
Three.js ShaderMaterial实战：两张贴图打造动态墙体流光特效
1. 理解ShaderMaterial的核心机制
在Three.js的世界里，ShaderMaterial就像是一把打开图形编程大门的钥匙。它允许我们直接编写顶点着色器和片元着色器，完全掌控渲染管线的每个细节。与标准材质不同，ShaderMaterial不包含任何预设的照明模型或材质属性，所有视觉效果都需要我们手动编码实现。
核心组件解析：
vertexShader：处理几何体的每个顶点，决定顶点在屏幕空间的位置fragmentShader：处理每个像素的颜色输出，实现最终的视觉效果uniforms：JavaScript与着色器程序通信的桥梁，可以实时传递参数
const material = new THREE.ShaderMaterial({ uniforms: { time: { value: 0 }, // 动画时间控制 texture1: { value: null }, // 第一张贴图 texture2: { value: null } // 第二张贴图 }, vertexShader: vertexShaderCode, fragmentShader: fragmentShaderCode });2. 双贴图协同工作原理
实现墙体流光效果的核心在于两张贴图的巧妙配合。背景贴图决定墙体的基础外观，而流动贴图则负责添加动态的光影效果。这种分离设计让特效制作变得模块化——更换任意一张贴图都能产生全新的视觉效果。
贴图选择建议：
- 背景贴图：选择高分辨率、无缝平铺的纹理（如砖墙、混凝土）
- 流动贴图：推荐使用带有alpha通道的渐变纹理（如光带、烟雾效果）
提示：流动贴图最好使用PNG格式，利用透明通道实现自然的混合效果
| 贴图类型 | 作用 | 推荐特性 |
|---|---|---|
| 背景贴图 | 确定墙体基础外观 | 无缝平铺、高分辨率 |
| 流动贴图 | 添加动态光效 | 带有alpha通道、渐变过渡 |
3. 完整实现步骤详解
3.1 准备阶段：资源加载与初始化
首先需要设置Three.js基础场景，并加载两张关键贴图。注意配置贴图的平铺模式，这对实现连续流动效果至关重要。
// 贴图加载器实例 const textureLoader = new THREE.TextureLoader(); // 加载背景贴图 const bgTexture = textureLoader.load('textures/wall_brick.jpg'); bgTexture.wrapS = bgTexture.wrapT = THREE.RepeatWrapping; // 加载流动贴图 const flowTexture = textureLoader.load('textures/light_streak.png'); flowTexture.wrapS = flowTexture.wrapT = THREE.RepeatWrapping;3.2 着色器代码编写
顶点着色器相对简单，主要任务是传递UV坐标和位置信息。真正的魔法发生在片元着色器中。
顶点着色器：
varying vec2 vUv; varying vec3 vPosition; void main() { vUv = uv; vPosition = position; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }片元着色器核心算法：
uniform float time; uniform sampler2D bgTexture; uniform sampler2D flowTexture; void main() { vec2 uv = vUv; // 基础墙体颜色 vec4 baseColor = texture2D(bgTexture, uv); // 流动效果UV计算 vec2 flowUV = vec2(uv.x, fract(uv.y - time * 0.5)); vec4 flowColor = texture2D(flowTexture, flowUV); // 混合公式 - 可根据需求调整 gl_FragColor = baseColor + flowColor * flowColor.a; }3.3 动画循环与参数调节
在渲染循环中更新time uniform，驱动动画效果。同时可以添加GUI控件方便实时调节参数。
const gui = new dat.GUI(); const params = { speed: 0.5, intensity: 1.0 }; gui.add(params, 'speed', 0, 2).onChange(updateUniforms); gui.add(params, 'intensity', 0, 3).onChange(updateUniforms); function animate() { requestAnimationFrame(animate); material.uniforms.time.value += params.speed * 0.01; renderer.render(scene, camera); } function updateUniforms() { material.uniforms.intensity.value = params.intensity; }4. 高级技巧与效果优化
4.1 混合模式创新实验
改变片元着色器中的混合公式可以产生截然不同的视觉效果。以下是几种值得尝试的变体：
叠加模式：
gl_FragColor = baseColor * (1.0 + flowColor * 2.0);屏幕混合：
gl_FragColor = 1.0 - (1.0 - baseColor) * (1.0 - flowColor);颜色减淡：
gl_FragColor = baseColor / (1.0 - flowColor);
4.2 多通道流动效果
通过组合多个流动贴图，可以创建更复杂的动态效果。例如，让光带沿不同方向和速度流动：
vec4 flowColor1 = texture2D(flowTexture1, vec2(fract(uv.x - time*0.3), uv.y)); vec4 flowColor2 = texture2D(flowTexture2, vec2(uv.x, fract(uv.y + time*0.7))); gl_FragColor = baseColor + (flowColor1 + flowColor2) * 0.5;4.3 性能优化建议
- 使用压缩纹理格式减少内存占用
- 对静态墙体考虑使用合并几何体技术
- 在片元着色器中尽量减少复杂计算
- 合理设置材质的precision参数
// 创建优化版ShaderMaterial const material = new THREE.ShaderMaterial({ precision: 'mediump', // 对移动设备友好 // ...其他参数 });5. 实战案例：科幻风格能量墙
将学到的技术应用于具体场景，创建一个科幻主题的能量墙效果。这个案例会使用特殊的电路板纹理作为背景，配合蓝光流动贴图。
关键实现步骤：
准备特制贴图：
- 背景：电路板纹理（RGB通道）+ 发光掩模（Alpha通道）
- 流动：径向渐变蓝光纹理
修改着色器实现边缘发光：
// 从背景贴图alpha通道获取边缘信息 float edge = texture2D(bgTexture, uv).a; // 增强流动效果在边缘区域的强度 vec3 finalColor = baseColor.rgb + flowColor.rgb * edge * 3.0; // 添加色彩偏移提升科技感 finalColor.b *= 1.5; finalColor.r *= 0.7; gl_FragColor = vec4(finalColor, 1.0);- 添加后期处理效果：
// 使用BloomPass增强发光效果 const bloomPass = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85 ); composer.addPass(bloomPass);