五、Three.js顶点UV坐标、纹理贴图

一部分来自1. 创建纹理贴图 | Three.js中文网 ，一部分是自己的总结。 

一、创建纹理贴图

 注意：把一张图片贴在模型上就是纹理贴图

1、纹理加载器TextureLoader

注意：将图片加载到加载器中

通过纹理贴图加载器TextureLoader的load()方法加载一张图片可以返回一个纹理对象Texture，纹理对象Texture可以作为模型材质颜色贴图.map属性的值。

const geometry = new THREE.PlaneGeometry(200, 100); 
//纹理贴图加载器TextureLoader
const texLoader = new THREE.TextureLoader();
// .load()方法加载图像，返回一个纹理对象Texture
const texture = texLoader.load('./earth.jpg');
const material = new THREE.MeshLambertMaterial({// 设置纹理贴图：Texture对象作为材质map属性的属性值map: texture,//map表示材质的颜色贴图属性
});

2、颜色贴图属性.map

 也可以通过颜色贴图属性.map直接设置纹理贴图，和材质的参数设置一样。

material.map = texture;

3、颜色贴图和color属性颜色值会混合

材质的颜色贴图属性.map设置后，模型会从纹理贴图上采集像素值，这时候一般来说不需要再设置材质颜色.color。.map贴图之所以称之为颜色贴图就是因为网格模型会获得颜色贴图的颜色值RGB。

颜色贴图map和color属性颜色值会混合。如果没有特殊需要，设置了颜色贴图.map,不用设置color的值，color默认白色0xffffff。

const material = new THREE.MeshBasicMaterial({color:'green',map:texture
})

4、测试不同几何体添加纹理贴图的效果

你可以尝试把颜色纹理贴图映射到不同的几何体上查看渲染效果，至于为什么映射效果不同，其实和UV坐标相关，具体可以关注下节课关于UV坐标的讲解

4.1、矩形

const geometry = new THREE.BoxGeometry(100, 100, 100); //长方体

 4.2、圆形

const geometry = new THREE.SphereGeometry(60, 25, 25); //球体

5、全部代码：

import * as THREE from 'three'const geometry = new THREE.SphereGeometry(100,100,100)
const LoadTex = new THREE.TextureLoader();
const texture = LoadTex.load('./map.jpg')
const material = new THREE.MeshBasicMaterial({// color:'green'map:texture
})const mesh = new THREE.Mesh(geometry,material)
export default mesh

二、自定义顶点UV坐标

 学习自定义顶点UV坐标之前，首先保证你对BufferGeometry的顶点数据、纹理贴图都有一定的理解。

1、顶点UV坐标的作用

顶点UV坐标的作用是从纹理贴图上提取像素映射到网格模型Mesh的几何体表面上。

浏览器控制台查看threejs几何体默认的UV坐标数据

const geometry = new THREE.PlaneGeometry(200, 100); //矩形平面
// const geometry = new THREE.BoxGeometry(100, 100, 100); //长方体
// const geometry = new THREE.SphereGeometry(100, 30, 30);//球体
console.log('uv',geometry.attributes.uv);

2、纹理贴图UV坐标范围

 顶点UV坐标可以在0~1.0之间任意取值，纹理贴图左下角对应的UV坐标是(0,0)，右上角对应的坐标(1,1)。

3、自定义顶点UVgeometry.attributes.uv

/**纹理坐标0~1之间随意定义*/
const uvs = new Float32Array([0, 0, //图片左下角1, 0, //图片右下角1, 1, //图片右上角0, 1, //图片左上角
]);
// 设置几何体attributes属性的位置normal属性
geometry.attributes.uv = new THREE.BufferAttribute(uvs, 2); //2个为一组,表示一个顶点的纹理坐标

4、获取纹理贴图四分之一

获取纹理贴图左下角四分之一部分的像素值

const uvs = new Float32Array([0, 0, 0.5, 0, 0.5, 0.5, 0, 0.5, 
]);

5、全部代码：

import * as THREE from 'three';const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array([0, 0, 0,100, 0, 0,100, 100, 0,0, 0, 0,100, 100, 0,0, 100, 0
])
const attribue = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribue;const uv = new Float32Array([0, 0,1, 0,1, 1,0, 0,1, 1,0, 1
])
geometry.attributes.uv = new THREE.BufferAttribute(uv, 2)const LoadTex = new THREE.TextureLoader();
const texture = LoadTex.load('./map.jpg')
const material = new THREE.MeshBasicMaterial({// color: 'green',map: texture
})const mesh = new THREE.Mesh(geometry, material)
export default mesh

 三、圆形平面设置纹理贴图

其实很简单，可以通过圆形几何体CircleGeometry创建一个网格模型Mesh，把一张图片作为圆形Mesh材质的颜色贴图，这样就可以把一张方形图片剪裁渲染为圆形效果。

import * as THREE from 'three';const geometry = new THREE.CircleGeometry(100,100)const LoadTex = new THREE.TextureLoader();
const texture = LoadTex.load('./map.jpg')
const material = new THREE.MeshBasicMaterial({// color: 'green',map: texture
})const mesh = new THREE.Mesh(geometry, material)
export default mesh

四、纹理对象Texture阵列

使用threejs纹理对象Texture的阵列功能+矩形平面几何体PlaneGeometry实现一个地面瓷砖效果

1、矩形平面设置颜色贴图

const geometry = new THREE.PlaneGeometry(2000, 2000);
//纹理贴图加载器TextureLoader
const texLoader = new THREE.TextureLoader();
// .load()方法加载图像，返回一个纹理对象Texture
const texture = texLoader.load('./瓷砖.jpg');
const material = new THREE.MeshLambertMaterial({// 设置纹理贴图：Texture对象作为材质map属性的属性值map: texture,//map表示材质的颜色贴图属性
});
const mesh = new THREE.Mesh(geometry, material);

2、纹理对象Texture的阵列功能

// .load()方法加载图像，返回一个纹理对象Texture
const texture = texLoader.load('./瓷砖.jpg');
// 设置阵列模式
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
// uv两个方向纹理重复数量
texture.repeat.set(12,12);//注意选择合适的阵列数量

3、旋转矩形平面

注意旋转方向影响矩形平面背面还是正面朝上，threejs默认渲染正面，不渲染背面

// 旋转矩形平面
mesh.rotateX(-Math.PI/2);

5、全部代码

import * as THREE from 'three';const geometry = new THREE.PlaneGeometry(2000, 2000)const LoadTex = new THREE.TextureLoader();
const texture = LoadTex.load('./瓷砖.jpg')
//允许阵列
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;texture.repeat.set(12, 12)const material = new THREE.MeshBasicMaterial({// color: 'green',map: texture
})const mesh = new THREE.Mesh(geometry, material)
mesh.rotateX(-Math.PI/2)
export default mesh

 五、矩形Mesh+背景透明png贴图

three.js项目开发中，把一个背景透明的.png图像作为平面矩形网格模型Mesh的颜色贴图是一个非常有用的功能，通过这样一个功能，可以对three.js三维场景进行标注。

整体思路：创建一个矩形平面，设置颜色贴图.map,注意选择背景透明的.png图像作为颜色贴图，同时材质设置transparent: true，这样png图片背景完全透明的部分不显示。

// 矩形平面网格模型设置背景透明的png贴图
const geometry = new THREE.PlaneGeometry(60, 60); //默认在XOY平面上
const textureLoader = new THREE.TextureLoader();
const material = new THREE.MeshBasicMaterial({map: textureLoader.load('./指南针.png'),        transparent: true, //使用背景透明的png贴图，注意开启透明计算
});
const mesh = new THREE.Mesh(geometry, material);
mesh.rotateX(-Math.PI / 2);

 

1、网格地面辅助观察GridHelper

//辅助网格线
const gridHelper = new THREE.GridHelper(500,25,'green','red')
scene.add(gridHelper)

 

2、开启透明transparent: true

const material = new THREE.MeshBasicMaterial({// color: 'green',map: texture,transparent: true, //使用背景透明的png贴图，注意开启透明计算
})

3、旋转平移矩形平面

PlaneGeometry矩形平面默认是在XOY平面上，如果你想平行于XOZ平面，就需要手动旋转。

mesh.rotateX(-Math.PI/2);//平行地面：矩形Mesh默认单面可见，注意旋转-Math.PI / 2

如果你不想矩形平面Mesh与地面网格线重合，可以通过位置属性.position偏移。

mesh.position.y = 1;//适当偏移，不与地面重合

六、UV动画

通过纹理对象的偏移属性.offset给大家实现一个UV动画效果。

1、纹理对象.offset属性

 纹理对象Texture的.offset的功能是偏移贴图在Mesh上位置，本质上相当于修改了UV顶点坐标。

texture.offset.x +=0.5;//纹理U方向偏移

texture.offset.y +=0.5;//纹理V方向偏移

2、纹理对象.wrapS或.wrapT与.offset组合使用

texture.offset.x +=0.5;//纹理U方向偏移
// 设置.wrapS也就是U方向，纹理映射模式(包裹模式)
texture.wrapS = THREE.RepeatWrapping;//对应offste.x偏移

texture.offset.y +=0.5;//纹理V方向偏移
// 设置.wrapT也就是V方向，纹理映射模式
texture.wrapT = THREE.RepeatWrapping;//对应offste.y偏移

 

3、纹理UV动画

纹理对象Texture的.offset的功能是偏移贴图在Mesh上位置。

// 渲染循环
function render() {texture.offset.x +=0.001;//设置纹理动画：偏移量根据纹理和动画需要，设置合适的值renderer.render(scene, camera);requestAnimationFrame(render);
}
render();

4、纹理贴图阵列 + UV动画

通过阵列纹理贴图设置.map,这样的话贴图像素可以更小一些

// 设置U方向阵列模式
texture.wrapS = THREE.RepeatWrapping;
// uv两个方向纹理重复数量
texture.repeat.x=50;//注意选择合适的阵列数量

// 渲染循环
function render() {texture.offset.x +=0.1;//设置纹理动画：偏移量根据纹理和动画需要，设置合适的值renderer.render(scene, camera);requestAnimationFrame(render);
}
render();

5、全部代码

import * as THREE from 'three';const geometry = new THREE.PlaneGeometry(500, 100)const LoadTex = new THREE.TextureLoader();
const texture = LoadTex.load('./瓷砖.jpg')
const material = new THREE.MeshBasicMaterial({// color: 'green',map: texture,transparent: true, //使用背景透明的png贴图，注意开启透明计算
})texture.wrapS = THREE.RepeatWrapping;
texture.repeat.x = 6;
const cube = new THREE.Mesh(geometry, material)
cube.rotateX(-Math.PI / 2);
export  { cube, texture }
import { cube, texture } from './group.js'function render() {texture.offset.x += 0.005renderer.render(scene, camera)requestAnimationFrame(render)
}render()

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/23089.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

学术论文项目网站搭建教程【Github】

学术论文项目网站搭建教程【Github】

本教程使用的是linux系统，ubuntu20.04版本进行学术项目网站搭建 一：创建github的个人组织 我个人习惯使用自己的github组织【Your organizations】来进行学术项目网站的创建： New一个organization，点击Free中的Create a free o…
阅读更多...
第4章 信息系统架构（三）

第4章 信息系统架构（三）

4.3 应用架构 应用架构的主要内容是规划出目标应用分层分域架构，根据业务架构规划目标应用域、应用组和目标应用组件，形成目标应用架构逻辑视图和系统视图。从功能视角出发，阐述应用组件各自及应用架构整体上，如何实现组织的高阶…
阅读更多...
第三十四周学习周报

第三十四周学习周报

目录 摘要Abstract1 文献阅读1.1 相关知识1.1.1 贝叶斯优化1.1.2 注意力机制复习 1.2 模型框架1.3 实验分析 总结 摘要 在本周阅读的文献中，作者提出了一种将注意力机制与LSTM相结合的模型AT-LSTM。虽然传统LSTM通过其门控机制能有效捕捉时间序列中的长期依赖关系&…
阅读更多...
pyside6学习专栏(七):自定义QTableWidget的扩展子类QTableWidgetEx

pyside6学习专栏(七):自定义QTableWidget的扩展子类QTableWidgetEx

PySide6界面编程中较常用的控件还有QTableWidget表格控件，用来将加载的数据在表格中显示出来，下面继承QTableWidget编写其扩展子类QTableWidgetEx,来实现用单元格来显示除数据文字外，还可以对表格的单元格的文字颜色、背景底色进行设置&#…
阅读更多...
图像处理篇---图像处理中常见参数

图像处理篇---图像处理中常见参数

文章目录 前言一、分贝（dB）的原理1.公式 二、峰值信噪比（PSNR, Peak Signal-to-Noise Ratio）1.用途2.公式3.示例 三、信噪比（SNR, Signal-to-Noise Ratio）1.用途2.公式3.示例 四、动态范围（Dyna…
阅读更多...
【大模型】蓝耘智算云平台快速部署DeepSeek R1/R3大模型详解

【大模型】蓝耘智算云平台快速部署DeepSeek R1/R3大模型详解

目录 一、前言 二、蓝耘智算平台介绍 2.1 蓝耘智算平台是什么 2.2 平台优势 2.3 应用场景 2.4 对DeepSeek 的支持 2.4.1 DeepSeek 简介 2.4.2 DeepSeek 优势 三、蓝耘智算平台部署DeepSeek-R1操作过程 3.1 注册账号 3.1.1 余额检查 3.2 部署DeepSeek-R1 3.2.1 获取…
阅读更多...
小米AX3000T 路由器如何开启 SSH 安装 OpenWRT 系统，不需要降级 v1.0.91 （2025）

小米AX3000T 路由器如何开启 SSH 安装 OpenWRT 系统，不需要降级 v1.0.91 （2025）

小米AX3000T 路由器如何开启 SSH 安装 OpenWRT 系统，不需要降级 v1.0.91 （2025） 本文内容需要你有一定的 Linux 操作基础，最好是程序员那种，英文水平足够用才行。一般人不需要使用这么复杂的路由器操作系统&#xff0c…
阅读更多...
新数据结构(12)——代理

新数据结构(12)——代理

什么是代理 在进行操作时有时不希望用户直接接触到目标，这时需要使用代理让用户间接接触到目标 给目标对象提供一个代理对象，并且由代理对象控制着对目标对象的引用 图解： 代理的目的 控制访问：通过代理对象的方式间接的访问目…
阅读更多...
逻辑函数的神经网络实现

逻辑函数的神经网络实现

1.单层感知器实现基本逻辑函数 先给大家抛出一道例题 （一）种类 a.OR函数 目标：当至少一个输入为1时，输出1；否则输出0。 权重设置： 输入权重：所有 wi1（i1,2,...,m）。…
阅读更多...
【亲测有效】百度Ueditor富文本编辑器添加插入视频、视频不显示、和插入视频后二次编辑视频标签不显示，显示成img标签，二次保存视频被替换问题，解决方案

【亲测有效】百度Ueditor富文本编辑器添加插入视频、视频不显示、和插入视频后二次编辑视频标签不显示，显示成img标签，二次保存视频被替换问题，解决方案

【亲测有效】项目使用百度Ueditor富文本编辑器上传视频相关操作问题 1.百度Ueditor富文本编辑器添加插入视频、视频不显示 2.百度Ueditor富文本编辑器插入视频后二次编辑视频标签不显示，在编辑器内显示成img标签，二次保存视频被替换问题 问题1&#xff1…
阅读更多...
RT-Thread+STM32L475VET6——USB鼠标模拟

RT-Thread+STM32L475VET6——USB鼠标模拟

文章目录 前言一、板载资源二、具体步骤1.配置icm20608传感器2.打开CubeMX进行USB配置3. 配置USB3.1 打开USB驱动3.2 声明USB3.3 剪切stm32xxxx_hal_msp.c中的void HAL_PCD_MspInit(PCD_HandleTypeDef* hpcd)和void HAL_PCD_MspDeInit(PCD_HandleTypeDef* hpcd)函数至board.c3.…
阅读更多...
Vue 中单向数据流原则

Vue 中单向数据流原则

做一个 ElementUI 弹框组件的二次封装 效果如下: 点击取消按钮发现弹出如下报错信息 : [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the …
阅读更多...
前后端分离系统架构：基于Spring Boot的最佳实践

前后端分离系统架构：基于Spring Boot的最佳实践

前后端分离系统架构图描绘了一个基于Springboot的前端后台分离的系统架构。它强调了前端（客户端）与远程（服务器）的解耦，通过API接口进行交互，分别独立开发和部署。 前后端分离系统架构图 从上到下&#xff…
阅读更多...
Neo4j使用neo4j-admin导入csv数据方法

Neo4j使用neo4j-admin导入csv数据方法

在neo4j desktop里创建project，创建dbms，创建database。 将csv文件放入如下import路径中，然后就可以使用相对路径来使用csv了。 在neo4j desktop中打开Terminal 键入导入数据语句： neo4j-admin database import full --nodes&qu…
阅读更多...
【Transformer架构】

【Transformer架构】

目录 一、Transformer介绍 1.1 Transformer的诞生 1.2 什么是Transformer 1.3 Transformer的优势 1.4 Transformer的市场 二、Transformer架构 2.1 Transformer模型的作用 2.2 Transformer总体架构图 2.2.1 Transformer总体架构 2.2.2 输入部分 2.2.3 输出部分 2.2.…
阅读更多...
设计模式-组合模式、模板模式

设计模式-组合模式、模板模式

组合模式 定义 将对象组合成树形结构以表示"部分-整体"的层次结构，组合模式使得用户对单个对象和组合对象的使用具有一致性； 组合模式实现的最关键的地方是-简单对象和复合对象必须实现相同的接口。这就是组合模式能够将组合对象和简单对象进…
阅读更多...
Spring Boot 概要（官网文档解读）

Spring Boot 概要（官网文档解读）

Spring Boot 概述 Spring Boot 是一个高效构建 Spring 生产级应用的脚手架工具，它简化了基于 Spring 框架的开发过程。 Spring Boot 也是一个“构件组装门户”，何为构件组装门户呢？所谓的“构件组装门户”指的是一个对外提供的Web平台&#x…
阅读更多...
SkyWalking集成Kafka实现日志异步采集经验总结

SkyWalking集成Kafka实现日志异步采集经验总结

SkyWalking日志异步采集架构 【重点知识】 1、【Agent】kafka-reporter-plugin-x.x.x.jar包放plugins目录后必走kafka（kafka没有正确配置就会报错） 2、【Agent】异步如不开启数据压缩，日志数据较大，pod多、业务大时容易造成网络…
阅读更多...
2025前端框架最新组件解析与实战技巧：Vue与React的革新之路

2025前端框架最新组件解析与实战技巧：Vue与React的革新之路

作者：飞天大河豚 引言 2025年的前端开发领域，Vue与React依然是开发者最青睐的框架。随着Vue 3的全面普及和React 18的持续优化，两大框架在组件化开发、性能优化、工程化支持等方面均有显著突破。本文将从最新组件特性、使用场景和编码技巧三…
阅读更多...
Orange 单体架构 - 快速启动

Orange 单体架构 - 快速启动

1 后端服务 1.1 基础设施 组件说明版本MySQLMySQL数据库服务5.7/8JavaJava17redis-stackRedis向量数据库最新版本Node安装Node22.11.0 1.2 orange-dependencies-parent 项目Maven依赖版本管理 1.2.1 项目克隆 GitHub git clone https://github.com/hengzq/orange-depende…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023