着色器加载纹理贴图

在 Three.js 中，纹理贴图是让 3D 物体呈现真实质感的核心手段之一。通过着色器加载纹理贴图，能精准控制纹理的采样、混合与显示效果（示例）

1.准备一张纹理图片，使用 Three.js 的TextureLoader加载纹理图片

// 创建纹理贴图加载器
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('https://threejs.org/examples/textures/758px-Canestra_di_frutta_(Caravaggio).jpg'); 

2.修改着色器代码

纹理贴图的核心是通过UV 坐标定位纹理像素，再通过纹理采样器获取颜色。需在顶点着色器传递 UV 坐标，在片段着色器采样纹理颜色。

// 顶点着色器
const vertexShader = `
    varying vec2 vUv;
    
    void main() {
        vUv = uv;
        // 将顶点位置转换为投影坐标
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
`;

// 片段着色器
const fragmentShader = `
    precision mediump float;
    varying vec2 vUv;
    uniform sampler2D uTexture; // 纹理采样器(从uniform获取的纹理)
    
    void main() {
        // 采样纹理颜色
        vec4 textureColor = texture2D(uTexture, vUv);
        // 使用纹理颜色
        vec3 finalColor = textureColor.rgb;
        gl_FragColor = vec4(finalColor, 1.0);
    }
`;

3.创建带纹理的着色器材质

// 创建着色器材质
const shaderMaterial = new THREE.ShaderMaterial({
    vertexShader: vertexShader,   // 顶点着色器
    fragmentShader: fragmentShader, // 片段着色器
    uniforms: {
        uTexture: { value: texture } // 将纹理传递给着色器
    },
    wireframe: false // 设置为true可以查看网格结构
});

核心概念解释

1. 纹理采样器（sampler2D）
   • 是 GLSL 中专门用于接收 2D 纹理的变量类型，必须声明为uniform（所有像素共享同一张纹理）。
   • 命名规范：通常以u开头（如uTexture）。
2. 纹理采样函数（texture2D）
   • 作用：根据 UV 坐标从纹理中获取对应像素的颜色。
   • 语法：vec4 texture2D(sampler2D sampler, vec2 uv)，返回值为vec4（r,g,b,a）颜色。
   • 示例扩展：若需调整纹理亮度，可修改采样结果：vec3 textureColor = texture2D(uTexture, vUv).rgb * 1.2; // 亮度提升20%