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

news2025/2/25 16:35:23

一部分来自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.005
    renderer.render(scene, camera)
    requestAnimationFrame(render)
}

render()

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

汽车零部件工厂如何通过ESD监控系统闸机提升产品质量

汽车零部件工厂如何通过ESD监控系统闸机提升产品质量

在汽车零部件工厂的生产过程中，静电带来的危害不容小觑。从精密的电子元件到复杂的机械部件，静电都可能成为影响产品质量的 “隐形杀手”。而 ESD 监控系统闸机的出现，为汽车零部件工厂解决静电问题、提升产品质量提供了关键的技术支持。 一、…
阅读更多...
Pi币与XBIT：在去中心化交易所的崛起中重塑加密市场

Pi币与XBIT：在去中心化交易所的崛起中重塑加密市场

在加密货币市场迅猛发展的背景下，Pi币和XBIT正在成为投资者关注的焦点。Pi币作为一项创新的数字货币，通过独特的挖矿机制和广泛的用户基础，迅速聚集了大量追随者，展示了强大的市场潜力。同时，币应XBIT去中心化交易所的…
阅读更多...
【Python量化金融实战】-第2章：金融市场数据获取与处理：2.1 数据源概览：Tushare、AkShare、Baostock、通联数据（DataAPI）

【Python量化金融实战】-第2章：金融市场数据获取与处理：2.1 数据源概览：Tushare、AkShare、Baostock、通联数据（DataAPI）

本章将详细介绍四大主流金融数据源（Tushare、AkShare、Baostock、通联数据（DataAPI）），分析其特点与适用场景，并通过实战案例展示数据获取与处理的全流程。 👉 点击关注不迷路 👉 点击…
阅读更多...
首次使用WordPress建站的经验分享（一）

首次使用WordPress建站的经验分享（一）

之前用过几种内容管理系统（CMS），如：dedeCMS、phpCMS、aspCMS，主要是为了前端独立建站，达到预期的效果，还是需要一定的代码基础的，至少要有HTML、Css、Jquery基础。 据说WordPress 是全球最流行的内容管理系统CMS，从现在开始记录一下使用WordPress 独立建站的步骤 选购…
阅读更多...
Mysql 主从集群同步延迟问题怎么解决

Mysql 主从集群同步延迟问题怎么解决

目录 前言： 复制过程分为几个步骤： 一、同步延迟的危害 二、同步延迟的常见原因 1. 主库写入压力过大 2. 网络传输瓶颈 3. 从库硬件性能不足 4. 配置参数不合理 5. 特殊操作影响 三、深度诊断方法 1. 查看同步状态 2. 性能分析工具 四、十大解…
阅读更多...
Unity Shader 学习13：屏幕后处理 - 使用高斯模糊的Bloom辉光效果

Unity Shader 学习13：屏幕后处理 - 使用高斯模糊的Bloom辉光效果

目录 一、基本的后处理流程 - 以将画面转化为灰度图为例 1. C#调用shader 2. Shader实现效果 二、Bloom辉光效果 1. 主要变量 2. Shader效果 （1）提取较亮区域 - pass1 （2）高斯模糊 - pass2&3 （3&#xff…
阅读更多...
三、《重学设计模式》-单例模式

三、《重学设计模式》-单例模式

单例模式 单例模式分为四大类，饿汉式、懒汉式、静态内部类、枚举 饿汉式 优点：类装载时进行实例化，避免同步问题 缺点：造成内存浪费 实现一 1.构造器私有化 2.内部创建对象实例 3.提供静态方法 public class Type1 {public s…
阅读更多...
SpringBoot3整合Swagger3时出现Type javax.servlet.http.HttpServletRequest not present错误

SpringBoot3整合Swagger3时出现Type javax.servlet.http.HttpServletRequest not present错误

目录 错误详情 错误原因 解决方法 引入依赖 修改配置信息 创建文件 访问 错误详情 错误原因 SpringBoot3和Swagger3版本不匹配 解决方法 使用springdoc替代springfox&#xff0c;具体步骤如下&#xff1a; 引入依赖 在pom.xml文件中添加如下依赖&#xff1a; <…
阅读更多...
项目实战--网页五子棋（匹配模块）(4)

项目实战--网页五子棋（匹配模块）(4)

上期我们完成了游戏大厅的前端部分内容&#xff0c;今天我们实现后端部分内容 1. 维护在线用户 在用户登录成功后&#xff0c;我们可以维护好用户的websocket会话&#xff0c;把用户表示为在线状态&#xff0c;方便获取到用户的websocket会话 package org.ting.j20250110_g…
阅读更多...
【Java毕业设计】商城购物系统（附源码+数据库脚本）

【Java毕业设计】商城购物系统（附源码+数据库脚本）

本系统是基于JavaEEServletJSPMysql实现的商城购物系统。包括用户登录、用户注册、商品分类、添加购物车、订单支付等基本功能&#xff0c;具体页面及功能如下&#xff1a; 感谢阅读&#xff01; 如需获取完整项目源码及更多项目信息&#xff0c;可添加V&#xff1a;
阅读更多...
POST请求提交数据的三种方式及通过Postman实现

POST请求提交数据的三种方式及通过Postman实现

1、什么是POST请求&#xff1f; POST请求是HTPP协议中一种常用的请求方法&#xff0c;它的使用场景是向客户端向服务器提交数据&#xff0c;比如登录、注册、添加等场景。另一种常用的请求方法是GET&#xff0c;它的使用场景是向服务器获取数据。 2、POST请求提交数据的常见编…
阅读更多...
Spring Boot 整合 Spring MVC /（整合Web）笔记

Spring Boot 整合 Spring MVC /（整合Web）笔记

1. Spring Boot 整合 Web 功能 Spring Boot 通过自动配置简化了 Spring MVC 的集成。只需在 pom.xml 中添加 spring-boot-starter-web 依赖&#xff0c;Spring Boot 就会自动配置 Spring MVC 的相关组件。 <dependency><groupId>org.springframework.boot</gr…
阅读更多...
[特殊字符]清华大学：DeepSeek从入门到精通.pdf（清华领航，驾驭DeepSeek，开启AI新境界）

[特殊字符]清华大学：DeepSeek从入门到精通.pdf（清华领航，驾驭DeepSeek，开启AI新境界）

不愧是清华大学出品的deepseek手册&#xff0c;简直是新手 福音&#xff0c;非常实用&#xff01; 这份《DeepSeek&#xff1a;从入门到精通》手册从基础到高 阶&#xff0c;手把手教你玩转DeepSeek&#xff0c;特别适合刚入门的小白&#xff0c;拿来就能用&#xff01; 1.Deep…
阅读更多...
深度学习技术全景图：从基础架构到工业落地的超级进化指南

深度学习技术全景图：从基础架构到工业落地的超级进化指南

&#x1f50d; 目录导航 基础架构革命训练优化秘技未来战场前瞻 &#x1f9e9; 一、基础架构革命 1.1 前馈神经网络&#xff08;FNN&#xff09; ▍核心结构 import torch.nn as nnclass FNN(nn.Module):def __init__(self):super().__init__()self.fc1 nn.Linear(784, 25…
阅读更多...
PyTorch-基础(CUDA、Dataset、transforms、卷积神经网络、VGG16)

PyTorch-基础(CUDA、Dataset、transforms、卷积神经网络、VGG16)

PyTorch-基础 环境准备 CUDA Toolkit安装&#xff08;核显跳过此步骤&#xff09; CUDA Toolkit是NVIDIA的开发工具&#xff0c;里面提供了各种工具、如编译器、调试器和库 首先通过NVIDIA控制面板查看本机显卡驱动对应的CUDA版本&#xff0c;如何去下载对应版本的Toolkit工…
阅读更多...
IO/网络IO基础全览

IO/网络IO基础全览

目录 IO基础CPU与外设1. 程序控制IO&#xff08;轮询&#xff09;2. 中断中断相关知识中断分类中断处理过程中断隐指令 3. DMA&#xff08;Direct Memory Access&#xff09; 缓冲区用户空间和内核空间IO操作的拷贝概念传统IO操作的4次拷贝减少一个CPU拷贝的mmap内存映射文件(m…
阅读更多...
【DeepSeek-R1背后的技术】系列十一：RAG原理介绍和本地部署（DeepSeekR1+RAGFlow构建个人知识库）

【DeepSeek-R1背后的技术】系列十一：RAG原理介绍和本地部署（DeepSeekR1+RAGFlow构建个人知识库）

【DeepSeek-R1背后的技术】系列博文&#xff1a; 第1篇&#xff1a;混合专家模型&#xff08;MoE&#xff09; 第2篇&#xff1a;大模型知识蒸馏&#xff08;Knowledge Distillation&#xff09; 第3篇&#xff1a;强化学习&#xff08;Reinforcement Learning, RL&#xff09;…
阅读更多...
鸿蒙开发深入浅出04（首页数据渲染、搜索、Stack样式堆叠、Grid布局、shadow阴影）

鸿蒙开发深入浅出04（首页数据渲染、搜索、Stack样式堆叠、Grid布局、shadow阴影）

鸿蒙开发深入浅出04&#xff08;首页数据渲染、搜索、Stack样式堆叠、Grid布局、shadow阴影&#xff09; 1、效果展示2、ets/pages/Home.ets3、ets/views/Home/SearchBar.ets4、ets/views/Home/NavList.ets5、ets/views/Home/TileList.ets6、ets/views/Home/PlanList.ets7、后端…
阅读更多...
【数据结构】B树家族详解：B树、B+树、B*

【数据结构】B树家族详解：B树、B+树、B*

一、B树（B-Tree） 1. 定义 B树是一种平衡多路查找树，自平衡的树，能够保持数据有序，设计目标是为减少磁盘I/O次数。适用于需要频繁读写磁盘的场景（如数据库、文件系统）。 2、B树基本性质 节点键值数量限制： 对于 m 阶 B 树，根节点至少有 1 个键值，最多有 m - 1 个…
阅读更多...
C语言数据结构—二叉树的链式结构实现

C语言数据结构—二叉树的链式结构实现

目录 1、建立二叉树 1.1 二叉树的结构 1.2 手动建立二叉树 2、二叉树的遍历 2.1 二叉树的三种遍历方式 2.1.1 前序遍历 2.1.2 中序遍历 2.1.2 后序遍历 3、求二叉树的结点数和二叉树的高度 3.1 求二叉树结点数 3.2 求二叉树叶子结点 3.3 求二叉树第k层结点的个数 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023