当前位置：首页 > news >正文

从零开始学习three.js（15）：一文详解three.js中的纹理映射UV

news 来源：原创 2025/8/14 6:19:46

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 i=0; i<uvs.length; i+=2){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分布不均匀
解决方案：
1. 使用更密集的几何细分
2. 制作UDIM纹理集
3. 应用三平面投影

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系统的潜力。

从零开始学习three.js（15）：一文详解three.js中的纹理映射UV

1. UV 映射基础概念 1.1 什么是 UV 坐标？ 在三维计算机图形学中，UV 坐标是将二维纹理映射到三维模型表面的坐标系统。UV 中的 U 和 V 分别代表2D纹理空间的水平（X）和垂直（Y）坐标轴，与三维空间…...

编程日记 2025/8/14 6:19:46

解锁 Postgres 扩展日！与瀚高共探 C/Java 跨语言扩展技术的边界与未来

2025 年 5 月 13 日至 16 日（蒙特利尔时间），一年一度的 PostgreSQL 开发者大会 PGConf.dev（原 PGCON 会议）将在加拿大蒙特利尔盛大举行。同去年一样，在本次大会开幕的前一天同样会举办另外一个专场活动——…...

编程日记 2025/6/29 2:25:04

【Hive入门】Hive增量数据导入：基于Sqoop的关系型数据库同步方案深度解析

目录引言 1 增量数据导入概述 1.1 增量同步与全量同步对比 1.2 增量同步技术选型矩阵 2 Sqoop增量导入原理剖析 2.1 Sqoop架构设计 2.2 增量同步核心机制 3 Sqoop增量模式详解 3.1 append模式（基于自增ID） 3.2 lastmodified模式（基…...

编程日记 2025/6/29 2:25:05

✍️【TS类型体操进阶】挑战类型极限，成为类型魔法师！♂️✨

哈喽类型战士们！今天我们要玩转TS类型体操，让你的类型系统像体操运动员一样灵活优雅~ 学会这些绝招，保准你的代码类型稳如老狗！（文末附类型体操段位表）🚀 一、什么是类型体操？ &…...

编程日记 2025/8/14 6:18:11

部署Prometheus+Grafana简介、监控及设置告警(一)

部署PrometheusGrafana简介、监控及设置告警一. 环境准备服务器类型IP地址组件 Prometheus服务器、agent服务器、Grafana服务器192.168.213.7Prometheus 、node_expprter，Grafanaagent服务器192.168.213.8node_exporter 如果有防火请记得开启9090&am…...

编程日记 2025/8/10 19:17:07

k8s部署OpenELB

k8s部署OpenELB k8s部署OpenELB配置示例: layer2模式 k8s部署OpenELB 部署OpenELB至K8s集群 # k8s部署OpenELB kubectl apply -f https://raw.githubusercontent.com/openelb/openelb/refs/heads/master/deploy/openelb.yaml# 查看openelb的pod状态 kubectl get pods -n open…...

编程日记 2025/6/29 2:24:57

python打卡day18

聚类后的分析：推断簇的类型知识点回顾： 推断簇含义的2个思路：先选特征和后选特征通过可视化图形借助ai定义簇的含义科研逻辑闭环:通过精度判断特征工程价值作业：参考示例代码对心脏病数据集采取类似操作，并且评估特征…...

编程日记 2025/6/29 3:35:48

新品发布 | 96MHz主频 M0+内核低功耗单片机CW32L011产品介绍

CW32L011是基于 eflash 的单芯片低功耗微控制器，集成了主频高达 96MHz的 ARMCortex-M0内核、高速嵌入式存储器(多至 64K字节 FLASH 和多至 6K 字节 SRAM)以及一系列全面的增强型外设和 I/O 口。所有型号都提供全套的通信接口(3路 UART、1路 SPI和1路12C)、12位高速…...

编程日记 2025/8/10 5:31:55

【面试 · 二】JS个别重点整理

目录数组方法字符串方法遍历 es6 构造函数及原型原型链 this指向修改 vue事件循环Event Loop FormData 数组方法改变原数组：push、pop、shift、unshift、sort、splice、reverse不改变原属组：concat、join、map、forEach、filter、slice …...

编程日记 2025/6/29 3:47:45

【详细教程】ROC曲线的计算方式与绘制方法详细介绍

《------往期经典推荐------》一、AI应用软件开发实战专栏【链接】项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…...

编程日记 2025/8/11 16:56:25

【神经网络与深度学习】VAE 在解码前进行重参数化

在 VAE 中，解码之前进行重参数化主要有以下几个重要原因： 可微分性在深度学习里，模型是通过反向传播算法来学习的，而这需要计算梯度。若直接从潜在变量的分布 (q_{\theta}(z|x))（由编码器输出的均值 (\mu) 和方差 (…...

编程日记 2025/6/29 4:16:16

ai agent(智能体)开发 python3基础11: java 调用python waitfor卡死，导致深入理解操作系统进程模型和IPC机制

java 调用python waitfor 卡死导致浏览器无法自动关闭，java ，python双发无限等待根源在于还是没有理解进程之间标准输入输出到底是什么含义系统进程与跨语言调用的核心机制在跨语言调用（如Java调用Python）时，理…...

编程日记 2025/8/14 6:18:11

大模型赋能：2D 写实数字人开启实时交互新时代

在数字化浪潮席卷全球的当下，人工智能技术不断突破创新，其中大模型驱动的 2D 写实数字人正成为实时交互领域的一颗新星，引领着行业变革，为人们带来前所未有的交互体验。一、2D 写实数字人概述 2D 写实数字人是通过计算机图形学…...

编程日记 2025/6/29 2:25:09

CATIA高效工作指南——零件建模篇（二）

一、PowerCopy特征复用技术 1.1 智能特征封装通过几何图形集(Geometrical Set)构建参数化特征组，将关联的草图、曲面、实体等元素进行逻辑封装。操作流程如下： 创建新几何图形集并完成特征建模激活PowerCopy命令，选择目标几何集定…...

编程日记 2025/6/29 2:25:10

QT人工智能篇-opencv

第一章认识opencv 1. 简单概述 OpenCV是一个跨平台的开源的计算机视觉库，主要用于实时图像处理和计算机视觉应用‌。它提供了丰富的函数和算法，用于图像和视频的采集、处理、分析和显示。OpenCV支持多种编程语言，包括C、Python、Java等&…...

编程日记 2025/8/13 15:30:25

java实现一个操作日志模块功能，怎么设计

为了设计一个高效、可靠且可扩展的操作日志模块，可以结合 AOP（面向切面编程）、异步处理（多线程或MQ）以及合理的存储策略，具体方案如下： 1. 技术选型与架构设计 (1) AOP 实现非侵…...

编程日记 2025/8/11 1:26:13

音频相关基础知识

主要参考： 音频基本概念_音频和音调的关系-CSDN博客音频相关基础知识（采样率、位深度、通道数、PCM、AAC）_音频2通道和8ch的区别-CSDN博客概述声音的本质声音的本质是波在介质中的传播现象，声波的本质是一种波，是一…...

编程日记 2025/8/14 6:18:08

【Agent】使用 Python 结合 OpenAI 的 API 实现一个支持 Function Call 的程序,修改本机的 txt 文件

使用 Python 结合 OpenAI 的 API 来实现一个支持 Function Call 的程序，修改本机的 txt 文件。需要注意，在运行代码前，要确保已经安装了 openai 库，并且拥有有效的 OpenAI API Key。 import openai import os# 设置你的 OpenAI A…...

编程日记 2025/8/7 15:28:13

mint系统详解详细解释

Linux Mint是一款基于Ubuntu的开源桌面操作系统，以用户友好、稳定性强、功能全面著称，尤其适合从Windows迁移的新手和追求高效办公的用户。以下从技术架构、版本演进、生态体系、核心功能、应用场景等维度进行深度解析： 一、技术架构&#x…...

编程日记 2025/8/11 18:21:59

WordPress个人博客搭建（三）：WordPress网站优化

前言在之前的WordPress个人博客搭建（一）与WordPress个人博客搭建（二）文章中，我们已经在自己的非凡云云服务器上成功搭建了WordPress个人博客。现在让我们继续这场数字世界的耕耘，通过插件与主题的巧妙搭配…...

编程日记 2025/8/11 21:45:22

力扣1812题解

记录 2025.5.7 题目： 思路： 从左下角开始，棋盘的行数和列数（均从 1 开始计数）之和如果为奇数，则为白色格子，如果和为偶数，则为黑色格子。代码： class Solution {pu…...

编程日记 2025/6/29 2:25:12

深入理解XGBoost（何龙著）学习笔记（三）

原创化心为海微阅读札记https://mp.weixin.qq.com/s/vBE3fu9AZDjRFd5niJU0lg 2025年05月06日 18:17 北京第三章机器学习算法基础摘要：本章首先介绍了基础的机器学习算法的实现原理和应用；然后对决策树模型做了详细介绍；最后&#xff0…...

编程日记 2025/6/29 4:27:27

一篇文章解析 H.264/AVC 视频编解码标准框架

古人有云: “不积跬步, 无以至千里; 不积小流, 无以成江海。” 本文给小伙伴们删繁就简介绍 H.264/AVC 视频编解码标准框架。 H.264/AVC框架 H.264/AVC 作为视频编码领域的里程碑标准，仍然沿用混合编码框架，但其通过模块化技术创新显著提升了压缩效率和网络适应性。H.264/AV…...

编程日记 2025/6/29 4:50:01

Sat2Density论文详解——卫星-地面图像生成

“Sat2Density: Faithful Density Learning from Satellite-Ground Image Pairs”，即从卫星-地面图像对中学习忠实的密度表示。论文的主要目标是开发一种能够准确表示卫星图像三维几何结构的方法，特别关注从卫星图像中合成具有3D意识的地面视图图像的挑战…...

编程日记 2025/8/14 6:18:10

【计算机架构】RISC（精简指令集计算机）架构

一、引言在计算机科学技术飞速发展的长河中，计算机架构犹如一艘艘领航的巨轮，不断引领着计算技术朝着更高性能、更低功耗、更智能化的方向前行。RISC（精简指令集计算机）架构便是其中一艘极为独特且极具影响力的“巨轮”。从早期计…...

编程日记 2025/8/14 6:18:07

智算中心基础设施0-1建设全流程及投产后的运维

0 - 1 建设全流程规划与设计需求分析：与相关部门和用户沟通，了解智算中心的业务需求，包括计算能力、存储容量、网络带宽、应用场景等，为后续的设计提供依据。选址规划：考虑电力供应、网络接入、环境条件、安全因素等…...

编程日记 2025/8/13 20:39:39

用3D slicer 去掉影像中的干扰体素而还原干净影像（脱敏切脸处理同）

今天遇到一个特殊的影像，扫描被试的头颅被很多干扰阴影快给遮盖住了，3D 建模出来的头颅有很多干扰，非常影响处理和视觉体验，正好解锁一个3D slicer 的功能吧。背景：有一个被试数据头顶有很多干扰，直接覆盖…...

编程日记 2025/8/10 17:55:54

滚动条样式

title: 滚动条样式 date: 2025-05-07 19:59:31 tags:css 滚动条样式完整定义 HTML 示例以下是一个包含所有主流浏览器滚动条样式属性的完整HTML文件，涵盖了WebKit内核浏览器和Firefox的滚动条定制： <!DOCTYPE html> <html lang"zh-CN&…...

编程日记 2025/8/10 3:40:23

Prompt（提示词）工程师，“跟AI聊天”

提示词工程师这活儿早就不只是“跟AI聊天”那么简单了，特别是现在MetaGPT、LangChain这些框架出来后，整个赛道都升级成“AI指挥官”的较量了。第一层：基础能力得打牢 AI语言学家的功底别笑，真得像学外语一样研究大模型。比如GP…...

编程日记 2025/6/29 2:25:45

Java版ERP管理系统源码（springboot+VUE+Uniapp）

ERP系统是企业资源计划（Enterprise Resource Planning）系统的缩写，它是一种集成的软件解决方案，用于协调和管理企业内各种关键业务流程和功能，如财务、供应链、生产、人力资源等。它的目标是帮助企业实现资源的高效利用…...

编程日记 2025/8/14 6:18:10

金融小知识

📉 一、“做空”是啥？ 通俗说法：押“它会跌”，赚钱！ ✅ 举个例子： 有一天老王的包子涨价到 10 块一个，张三觉得这价格肯定撑不住，未来会跌到 5 块。于是他： 向朋友借了…...

编程日记 2025/6/29 5:06:24

高组装导轨的特点

高组装导轨通常是四列式单圆弧齿形接触直线导轨，具有整合化的结构设计，适用于重负荷和精密应用。与其它直线导轨高组装导轨提升了负荷与刚性能力，具备四方向等负载特色和自动调心功能，能够吸收安装面的装配误差，达到高…...

编程日记 2025/8/14 4:28:54

PE文件结构（导入表）

导入表什么是导入表？ 导入表就是pe文件需要依赖哪些模块以及依赖这些模块中的哪些函数回想我们导出表的内容，导出表的位置和大小是保存在扩展pe头最后一个结构体数组当中的 IMAGE_DATA_DIRECTORY DataDirectory[IMAGE_NUMBEROF_DIRECTORY_ENTRIES]第…...

编程日记 2025/8/10 9:44:27

AI 实践探索：辅助生成测试用例

背景目前我们的测试用例主要依赖人工生成和维护，AI时代的来临，我们也在思考“AI如何赋能业务”，提出了如下命题： “探索通过AI辅助生成测试用例，完成从需求到测试用例生成的穿刺”。目标找全测试路径辅助生成测…...

编程日记 2025/8/10 23:33:08

2025年链游行业DDoS与CC攻击防御全解析：高带宽时代的攻防博弈

2025年，链游行业在元宇宙与Web3.0技术的推动下迎来爆发式增长，但随之而来的DDoS与CC攻击也愈发猖獗。攻击者瞄准链游的高频交易接口、NFT拍卖系统及区块链节点，通过混合型攻击（如HTTP FloodUDP反射）瘫痪服务&#xff0…...

编程日记 2025/8/11 19:16:30

LeetCode热题100--73.矩阵置零--中等

1. 题目给定一个 m x n 的矩阵，如果一个元素为 0 ，则将其所在行和列的所有元素都设为 0 。请使用原地算法。示例 1： 输入：matrix [[1,1,1],[1,0,1],[1,1,1]] 输出：[[1,0,1],[0,0,0],[1,0,1]] 示例 2&#xff…...

编程日记 2025/8/11 19:32:36

51camera将参加第九届沥青路面论坛暨新技术新成果展示会

51camera志强视觉 51camera即将参加第九届沥青路面论坛暨新技术新成果展示会，届时会有相关动态应用展示，欢迎广大客户朋友莅临参观。会议时间：2025 年5月16日-18日会议地点：长沙国际会议中心一层多功能厅1-6厅（长…...

编程日记 2025/8/12 16:48:21

python 闭包获取循环数据经典 bug

问题代码 def create_functions():functions []for i in range(3):# 创建一个函数,期望捕获当前循环的i值functions.append(lambda: print(f"My value is: {i}"))return functions# 创建三个函数 f0, f1, f2 create_functions()# 调用这些函数 f0() # 期望输出 &…...

编程日记 2025/8/11 2:48:19

Java的HashMap面试题

目录 1. 说一下HashMap的工作原理？（1.7和1.8都是） 2. 了解的哈希冲突解决方法有哪些 3. JAVA8的 HashMap做了哪些优化 4. HashMap的数组长度必须是 2 的 n 次方 5. HashMap什么时候引发扩容 5.1 数组容量小于64的情况： 5.2…...

编程日记 2025/8/10 15:44:14

spring4.x详解介绍

一、核心特性与架构改进全面支持Java 8与Java EE 7 Spring 4.x首次实现对Java 8的完整支持，包括： Lambda表达式与Stream API：简化代码编写，提升函数式编程能力； 新的时间日期API（如LocalDate、LocalTime&…...

编程日记 2025/8/11 12:34:51

从图灵机到量子计算：逻辑可视化的终极进化

一、图灵机：离散符号系统的奠基者 1.1 计算理论的数学根基 1936 年，艾伦・图灵在《论可计算数及其在判定问题中的应用》中提出的图灵机模型，本质上是一个由七元组\( M (Q, \Sigma, \Gamma, \delta, q_0, q_{accept}, q_{reject}) \)构成的…...

编程日记 2025/8/9 1:37:37