Three.js中编写自定义着色器需使用ShaderMaterial，通过GLSL定义顶点和片段着色器，结合uniforms传递动态数据，实现如彩色渐变球体等视觉效果，提升3D场景表现力。
Three.js 是一个强大的 JavaScript 3D 库，它让开发者可以在浏览器中轻松创建和展示三维内容。当你需要更精细地控制物体的外观时，原生材质可能无法满足需求，这时就需要编写自定义着色器（Shader）。着色器是运行在 GPU 上的小程序，用 GLSL（OpenGL Shading Language）编写，分为顶点着色器（vertex shader）和片段着色器（fragment shader）。本文将带你了解如何在 Three.js 中编写自定义着色器。
理解着色器基础
在 Three.js 中使用自定义着色器，你需要了解两个核心部分：
- 顶点着色器：处理每个顶点的位置、法线、纹理坐标等属性，决定模型在屏幕上的形状和位置。
- 片段着色器：计算每个像素的颜色，决定物体表面的视觉效果，如颜色、光照、纹理等。
着色器代码使用 GLSL 编写，语法类似 C 语言。注意版本差异：WebGL 1 使用 precision mediump float; 声明精度，而 WebGL 2 支持更高精度和更多特性。
在 Three.js 中创建 ShaderMaterial
Three.js 提供了 ShaderMaterial 类，允许你传入自定义的顶点和片段着色器代码。
立即学习“Java免费学习笔记（深入）”；
示例：实现一个简单的彩色渐变球体定义顶点着色器：
const vertexShader = \`
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
\`;定义片段着色器：
const fragmentShader = \`
uniform float time;
void main() {
vec3 color = 0.5 + 0.5 * sin(time + gl_FragCoord.x * 0.01, time + gl_FragCoord.y * 0.01, time);
gl_FragColor = vec4(color, 1.0);
}
\`;创建材质并应用到几何体：
const material = new THREE.ShaderMaterial({
vertexShader,
fragmentShader,
uniforms: {
time: { value: 0.0 }
}
});
<p>const geometry = new THREE.SphereGeometry(1, 32, 32);
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);在动画循环中更新 uniform：
function animate() {
requestAnimationFrame(animate);
material.uniforms.time.value += 0.01;
renderer.render(scene, camera);
}使用 Uniforms 和 Attributes 传递数据
Uniforms 是全局变量，在整个渲染过程中保持不变（除非手动更新），适合传递时间、光照参数、颜色等。
Attributes 是每个顶点独有的数据，如顶点位置、法线、颜色等，通常由几何体自动提供。
常见内置 attributes：
-
position：顶点位置 -
normal：法线向量 -
uv：纹理坐标
Three.js 自动将这些属性传入顶点着色器，你只需声明即可使用。
高级技巧与性能建议
编写高效着色器需要注意以下几点：
- 避免在片段着色器中进行复杂循环或递归计算，这会显著降低性能。
- 使用
uniforms缓存频繁变化的数据，减少 CPU 到 GPU 的传输开销。 - 合理设置精度，移动端推荐使用
mediump或lowp提高兼容性。 - 利用 Three.js 内置变量如
modelViewMatrix、projectionMatrix简化矩阵运算。
调试着色器时，可逐步注释代码段，观察输出变化，或使用 gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); 测试是否执行到某行。
基本上就这些。掌握着色器编写后，你可以实现火焰、水流、溶解、噪声动画等高级视觉效果，极大提升 3D 场景的表现力。
