廊坊网站公司,dw做网站背景音乐,建设银行境外汇款申请书网站,做装饰材料的网站1. UV 映射基础概念
1.1 什么是 UV 坐标#xff1f;
在三维计算机图形学中#xff0c;UV 坐标是将二维纹理映射到三维模型表面的坐标系统。UV 中的 U 和 V 分别代表2D纹理空间的水平#xff08;X#xff09;和垂直#xff08;Y#xff09;坐标轴#xff0c;与三维空间…1. UV 映射基础概念
1.1 什么是 UV 坐标
在三维计算机图形学中UV 坐标是将二维纹理映射到三维模型表面的坐标系统。UV 中的 U 和 V 分别代表2D纹理空间的水平X和垂直Y坐标轴与三维空间中的 XYZ 坐标形成区分。
UV 坐标系范围[0,0] 到 [1,1]每个顶点对应一个UV坐标纹理采样器通过UV值获取纹理颜色
1.2 坐标系差异
// Three.js 中的坐标系对比
三维模型坐标(x, y, z) ∈ [-∞, ∞]
纹理UV坐标(u, v) ∈ [0, 1]
屏幕像素坐标(x, y) ∈ [0, viewportSize]2. Three.js 中的 UV 实现
2.1 Geometry 与 BufferGeometry
// 经典 Geometry 的UV设置
const geometry new THREE.Geometry();
geometry.faceVertexUvs[0].push([new THREE.Vector2(0, 0),new THREE.Vector2(1, 0),new THREE.Vector2(0.5, 1)
]);// BufferGeometry 的UV设置
// 自定义平面几何体
const geometry new THREE.BufferGeometry();
const vertices new Float32Array([...]); // 顶点坐标
const uv new Float32Array([0, 0, // 顶点0的UV1, 0, // 顶点1的UV1, 1, // 顶点2的UV0, 1 // 顶点3的UV
]);
geometry.setAttribute(position, new THREE.BufferAttribute(vertices, 3));
geometry.setAttribute(uv, new THREE.BufferAttribute(uv, 2)); // 关键UV设置[1,5](ref)
2.2 内置几何体的UV映射
映射类型特点适用场景Three.js实现平面映射正交投影无透视变形墙面、地面PlaneGeometry默认UV2立方体映射6面独立展开盒子、建筑BoxGeometry自动生成4球形映射极坐标展开行星、球体SphereGeometry经线展开6圆柱映射环形展开管道、柱体需手动设置UV3
2.2.1 BoxGeometry
6个立方体面共享同一张纹理每个面UV范围[ (0,0), (1,1) ]默认沿表面均匀展开但可能存在接缝
2.2.2 SphereGeometry
经线方向U坐标0到1纬线方向V坐标0到1极点处UV密度较高采用球形投影UV 在两极可能出现拉伸。
2.2.3 CylinderGeometry
侧面U环绕圆柱V沿高度顶部/底面圆形UV展开
3. UV 操作实战技巧
3.1 动态修改UV坐标
// 获取UV属性数组
const uvAttribute geometry.getAttribute(uv);
const uvs uvAttribute.array;// 修改第三个顶点的U坐标
uvs[2 * 2] 0.75; // 索引计算顶点索引 * 分量数 偏移// 必须标记更新
uvAttribute.needsUpdate true;3.2 纹理重复与偏移
const texture new THREE.TextureLoader().load(tile.jpg);
texture.wrapS THREE.RepeatWrapping;
texture.wrapT THREE.MirroredRepeatWrapping;
texture.repeat.set(2, 3);
texture.offset.set(0.5, 0.25);4. 高级 UV 应用
4.1 多重纹理混合
// 着色器代码示例
varying vec2 vUv;
uniform sampler2D texture1;
uniform sampler2D texture2;void main() {vec4 texColor1 texture2D(texture1, vUv);vec4 texColor2 texture2D(texture2, vUv * 2.0);gl_FragColor mix(texColor1, texColor2, 0.5);
}4.2 UV 动画
function animate() {requestAnimationFrame(animate);// 水平滚动纹理texture.offset.x 0.01;// 动态修改UV坐标const uvs geometry.attributes.uv.array;for(let i0; iuvs.length; i2){uvs[i] Math.sin(Date.now() * 0.001) * 0.01;}geometry.attributes.uv.needsUpdate true;
}4.3 顶点着色器中的 UV 控制
通过自定义着色器实现复杂效果
// 顶点着色器
varying vec2 vUv;
uniform float time;void main() {vUv uv vec2(time * 0.1, 0.0);gl_Position projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}4.4 法线映射与 UV 的关系
法线贴图依赖 UV 坐标确定法线方向
const material new THREE.MeshStandardMaterial({normalMap: normalTexture,normalScale: new THREE.Vector2(0.5, 0.5) // 控制法线强度
});4.5 光照烘焙与 UV
在 Blender 中烘焙光照后导出带有uv2的模型
// 在Three.js中启用第二组UV
geometry.setAttribute(uv2, new THREE.BufferAttribute(uv2Array, 2));
material.aoMap aoTexture;
material.aoMap.uvTransform new THREE.Matrix3().fromArray(uvTransform);5. 常见问题解决方案
5.1 纹理拉伸问题 成因UV分布不均匀 解决方案 使用更密集的几何细分制作UDIM纹理集应用三平面投影
5.2 接缝处理技巧 原因UV 坐标不连续或导出时顶点 UV 重复。 解决方案 在 Blender 中使用Smart UV Project重新展开。 导出时勾选Merge by Distance选项。 在 Three.js 中调整 UV 坐标 const uvArray geometry.attributes.uv.array;
for (let i 0; i uvArray.length; i 2) {uvArray[i] uvArray[i] % 1;uvArray[i 1] uvArray[i 1] % 1;
}
geometry.attributes.uv.needsUpdate true;6. 性能优化建议
合并UV集将多个材质的UV合并到同一纹理图集使用压缩纹理格式推荐 KTX2或者Basis Universal 格式避免动态UV更新静态几何体应冻结UV缓冲区LOD策略根据距离切换UV细节层级
7. 调试工具推荐
UV检查材质
const debugMaterial new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load(uv-grid.png)
});Three.js编辑器可视化UV展开Blender Three.js导出专业级UV编辑流程
结语
UV映射是连接3D模型与2D纹理的核心桥梁。通过深入理解Three.js的UV实现机制开发者可以创建更复杂的材质效果、优化渲染性能并解决实际项目中的各种纹理映射难题。实际开发中需注意纹理尺寸需为2的幂、不同材质类型对UV的支持差异、移动端性能优化等。建议结合WebGL着色器编程进一步挖掘UV系统的潜力。
