ThreeJs学习-纹理贴图、顶点UV坐标

### Three.js 中使用着色器处理纹理坐标的介绍 在 Three.js 中，通过自定义着色器来处理纹理坐标能够实现复杂而高效的图形效果。为了使纹理映射到几何体上，顶点着色器需计算并将纹理坐标传递给片元着色器，在那里完成最终的颜色采样。 #### 准备工作 首先创建带有纹理坐标的几何体： ```javascript const texture = new THREE.TextureLoader().load('path/to/texture.jpg'); // 假设我们有一个平面网格作为例子 const geometry = new THREE.PlaneGeometry(1, 1); ``` 接着准备用于接收来自顶点着色器传来的纹理坐标的变量声明： ```glsl varying vec2 vUv; ``` 该 `vUv` 变量将在顶点着色器中被赋值，并传输至片元着色器供其读取和应用纹理贴图。 #### 编写顶点着色器 顶点着色器负责将模型空间中的顶点变换到裁剪空间的同时也应把相应的纹理坐标发送出去： ```glsl attribute vec2 uv; void main() { // 将uv属性直接赋予变化量vUv以便后续片段着色器使用 vUv = uv; // 正常执行投影矩阵乘法得到裁剪坐标 gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } ``` 此处利用了内置的 `projectionMatrix`, `modelViewMatrix` 和 `position` 属性来进行必要的坐标转换[^3]。 #### 片段着色器编写 随后，在片段着色器里依据接收到的变化后的纹理坐标对输入图像进行采样： ```glsl uniform sampler2D tDiffuse; varying vec2 vUv; void main(){ // 对纹理进行采样并输出颜色 gl_FragColor = texture2D(tDiffuse, vUv); } ``` 这里的关键在于调用了 `texture2D()` 函数，它接受两个参数——一个是表示纹理对象的 uniform (`tDiffuse`)；另一个则是用来定位具体像素位置的二维向量(`vUv`)。 #### 材质构建与场景集成 最后一步就是把这些 GLSL 代码封装成 ShaderMaterial 实例并与 Mesh 组件关联起来形成完整的渲染管道： ```javascript const material = new THREE.ShaderMaterial({ uniforms: { "tDiffuse": { value: texture } }, vertexShader, fragmentShader }); const mesh = new THREE.Mesh(geometry, material); scene.add(mesh); ``` 上述过程展示了如何基于 Three.js 的 API 结合自定义着色器逻辑来高效地管理和呈现带纹理的对象[^2]。