ThreeJS 几何体顶点position、法向量normal及uv坐标 | UV映射 - 法向量 - 包围盒

news2024/11/15 15:31:26

文章目录

  • 几何体的顶点position、法向量normal及uv坐标
    • UV映射
      • UV坐标系
      • UV坐标与顶点坐标
      • 设置UV坐标
        • 案例1：使用PlaneGeometry创建平面缓存几何体
        • 案例2：使用BufferGeometry创建平面缓存几何体
    • 法向量 - 顶点法向量光照计算
      • 案例1：不设置顶点法向量平面几何体与自带顶点法向量的平面几何体对比
      • 案例2：设置法向量
        • 方式1 computeVertexNormals方法
        • 方式2：自定义normal属性值
        • 引入顶点法向量辅助器VertexNormalsHelper
    • 几何体的移动、旋转和缩放
      • 移动几何体的顶点 bufferGeometry.translate
        • 几何体平移与物体平移
      • 几何体旋转与模型旋转(缩放同理)

几何体的顶点position、法向量normal及uv坐标

UV映射

UV映射是一种将二维纹理映射到三维模型表面的技术。
在这个过程中，3D模型上的每个顶点都会被赋予一个二维坐标(U, V)。
这些坐标用于将纹理图像上的像素与模型表面上的点进行对应。

UV坐标系

U和V分别表示纹理坐标的水平和垂直方向，使用UV来表达纹理的坐标系。
UV坐标的取值范围是0~1，纹理贴图左下角对应的UV坐标是(0,0)，右上角对应的坐标(1,1)。
在这里插入图片描述

UV坐标与顶点坐标

类型含义属性
UV坐标该顶点在纹理上的二维坐标（U, V）geometry.attributes.uv
顶点坐标3D/2D模型中每个顶点的空间坐标（x, y, z)geometry.attributes.position
  • 位置关系是一一对应的，每一个顶点位置对应一个纹理贴图的位置
  • 顶点位置用于确定模型在场景中的形状，而UV坐标用于确定纹理在模型上的分布。

设置UV坐标

案例1：使用PlaneGeometry创建平面缓存几何体
// 图片路径public/assets/panda.png
let uvTexture = new THREE.TextureLoader().load("/assets/panda.png");

// 创建平面几何体
const planeGeometry = new THREE.PlaneGeometry(100, 100);
console.log("planeGeometry.attributes.position",planeGeometry.attributes.position.array);
console.log("planeGeometry.attributes.uv",planeGeometry.attributes.uv.array);
console.log("planeGeometry.index",planeGeometry.index.array);

// 创建材质
const planeMaterial = new THREE.MeshBasicMaterial({
  map: uvTexture,
});
// 创建平面
const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
// 添加到场景
scene.add(planeMesh);
planeMesh.position.x = -3;

在这里插入图片描述
贴图正确显示，查看position与uv发现设置贴图时已自动计算出uv坐标
在这里插入图片描述

案例2：使用BufferGeometry创建平面缓存几何体

1.使用BufferGeometry创建平面缓存几何体，通过map设置贴图。

let uvTexture = new THREE.TextureLoader().load("/assets/panda.png");
// 创建平面几何体
const geometry = new THREE.BufferGeometry();
// 使用索引绘制
const vertices = new Float32Array([
  -50, 50, 0, 
  50, 50, 0, 
  -50, -50, 0,
  50, -50,0
]);
// 创建顶点属性
geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
// 创建索引
const indices = new Uint16Array([0, 2, 1, 2, 3, 1]);
// 创建索引属性
geometry.setIndex(new THREE.BufferAttribute(indices, 1));
// 创建材质
const material = new THREE.MeshBasicMaterial({
  map: uvTexture,
});
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);
plane.position.x = 3;
console.log("geometry.attributes.position",geometry.attributes.position.array);
console.log("geometry.attributes.uv",geometry.attributes.uv);
console.log("geometry.index",geometry.index.array);

贴图并没有生效，通过打印发现BufferGeometry没有uv坐标，需要自定义uv坐标
在这里插入图片描述

2.根据纹理坐标将纹理贴图的对应位置裁剪映射到几何体的表面上


let uvTexture = new THREE.TextureLoader().load("/assets/panda.png");
const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array([
  -50, 50, 0, 
  50, 50, 0, 
  -50, -50, 0,
  50, -50,0
]);
geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
const indices= new Uint16Array([0, 2, 1, 2, 3, 1]);
geometry.setIndex(new THREE.BufferAttribute(indices, 1));
const material = new THREE.MeshBasicMaterial({
  map: uvTexture,
});
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);
plane.position.x = 3;
const uv = new Float32Array([
	0,1,
	1,1,
	0,0,
	1,0
]);
geometry.attributes.uv = new THREE.BufferAttribute(uv, 2);

法向量 - 顶点法向量光照计算

太阳光照在一个物体表面，物体表面与光线夹角位置不同的区域明暗程度不同。

法向量 用于根据光线与物体表面入射角，计算得到反射角(光从哪个角度反射出去)。光照和法向量的夹角决定了平面反射出的光照强度。
在这里插入图片描述

在Threejs中表示物体的网格模型Mesh的曲面是由一个一个三角形构成，所以为了表示物体表面各个位置的法线方向，可以给几何体的每个顶点定义一个方向向量，通过属性geometry.attributes.normal设置。

一个三角面只会有一个法向量。一个顶点会属于不同的三角面，因此一个顶点会有多个法向量。红色短线表示顶点法向量，绿色短线表示面法向量

在这里插入图片描述

案例1：不设置顶点法向量平面几何体与自带顶点法向量的平面几何体对比

1.准备两个平面几何，使用同一个材质。一个使用已经设置了法向量的PlaneGeometry创建，另一个使用默认没设置法向量的BufferGeometry创建

// 没设置法向量的BufferGeometry
const bufferGeometry = new THREE.BufferGeometry();
const vertices = new Float32Array([
  -50, 50, 0, 
  50, 50, 0, 
  -50, -50, 0,
  50, -50,0
]);
bufferGeometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
const indices = new Uint16Array([0, 2, 1, 2, 3, 1]);
bufferGeometry.setIndex(new THREE.BufferAttribute(indices, 1));
const material = new THREE.MeshBasicMaterial({
  map: uvTexture,
});
const bufferPlane = new THREE.Mesh(bufferGeometry, material);
scene.add(bufferPlane);
bufferPlane.position.x = -100;
const uv = new Float32Array([
	0,1,
	1,1,
	0,0,
	1,0
]);
bufferGeometry.attributes.uv = new THREE.BufferAttribute(uv, 2);
// 自带法向量的PlaneGeometry
const planeGeometry = new THREE.PlaneGeometry(100, 100);
const planeMesh = new THREE.Mesh(planeGeometry, material);
scene.add(planeMesh);
planeMesh.position.x = 100;

2.给模型设置环境贴图后，可以将光反射的环境部分映射到模型上(类似镜子将人反射在镜子上面)，法向量用于计算，光从哪里反射出去。

// 设置环境贴图
const loader = new THREE.TextureLoader();
loader.load("/assets/test.jpg",(envMap)=>{
  envMap.mapping = THREE.EquirectangularReflectionMapping;// 设置反射的方式
  material.envMap = envMap; // 设置环境贴图
  scene.background = envMap; // 将这幅图设置为环境(可选)
})

可以发现，没有法向量的平面几何体没有对光进行反射
在这里插入图片描述

案例2：设置法向量

方式1 computeVertexNormals方法

bufferGeometry.computeVertexNormals () 提供了计算顶点法向量的方法，所以只需要让BufferAttribute创建的平面几何体计算顶点法向量即可

const bufferGeometry = new THREE.BufferGeometry();
const vertices = new Float32Array([
  -50, 50, 0, 
  50, 50, 0, 
  -50, -50, 0,
  50, -50,0
]);
bufferGeometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
const indices = new Uint16Array([0, 2, 1, 2, 3, 1]);
bufferGeometry.setIndex(new THREE.BufferAttribute(indices, 1));
const material = new THREE.MeshBasicMaterial({
  map: uvTexture,
});
const bufferPlane = new THREE.Mesh(bufferGeometry, material);
scene.add(bufferPlane);
bufferPlane.position.x = -100;
const uv = new Float32Array([
	0,1,
	1,1,
	0,0,
	1,0
]);
bufferGeometry.attributes.uv = new THREE.BufferAttribute(uv, 2);
bufferGeometry.computeVertexNormals(); // 增加

在这里插入图片描述

方式2：自定义normal属性值

本来矩形由2个三角形组成，也就是6个顶点。但有些顶点重复，为了复用我们也设置了顶点索引。所以这里的法向量也按照顶点索引来设置。

// 顶点索引 [0, 2, 1, 2, 3, 1]

const normals = new Float32Array([
  0, 0, 1,
  0, 0, 1,        
  0, 0, 1,
  0, 0, 1
])
bufferGeometry.setAttribute("normal", new THREE.BufferAttribute(normals, 3));
引入顶点法向量辅助器VertexNormalsHelper

语法:new VertexNormalsHelper( object : Object3D, size : Number, color : Hex, linewidth : Number )
object:要渲染顶点法线辅助的对象
size （可选的）箭头的长度，默认为 1
color 16进制颜色值. 默认为 0xff0000
linewidth (可选的) 箭头线段的宽度，默认为 1
继承链：Object3D → Line → VertexNormalsHelper

为了更方便调试，可以引入顶点法向量辅助器

import { VertexNormalsHelper } from 'three/addons/helpers/VertexNormalsHelper.js';

// 这里的参数是模型，不是几何体
const vertexNormalsHelper= new VertexNormalsHelper(bufferPlane, 8.2, 0xff0000);
scene.add(vertexNormalsHelper);

在这里插入图片描述

几何体的移动、旋转和缩放

BufferGeometry重写了Object3D的同名方法，几何变换的本质是改变几何体的顶点数据

在这里插入图片描述

方法描述
bufferGeometry.scale ( x : Float, y : Float, z : Float )从几何体原始位置开始缩放几何体
bufferGeometry.translate ( x : Float, y : Float, z : Float )从几何体原始位置开始移动几何体，本质改变的是顶点坐标
bufferGeometry.rotateX/rotateY/rotateZ( radians : Float )沿着对象坐标系(局部空间)的主轴旋转几何体，参数是弧度

移动几何体的顶点 bufferGeometry.translate

这里需要区分移动几何体的顶点和移动物体，一般情况下选择移动物体，当顶点本身就偏离需要将几何体中心移动到原点时选择移动几何体(消除中心点偏移)。

几何体的变换由于直接将最终计算结果设置为顶点坐标，所以很难追逐到是否发生了变换。

-使用描述
移动几何体的顶点bufferGeometry.translate ( x : Float, y : Float, z : Float )改变几何体的 ,geometry.attributes.position属性
移动物体object3D.position : Vector3移动对象的局部位置
  • 任何一个模型的本地坐标(局部坐标)就是模型的.position属性。
  • 一个模型的世界坐标，模型自身.position和所有父对象.position累加的坐标。

案例

const bufferGeometry = new THREE.BufferGeometry();
const vertices = new Float32Array([
  -50, 50, 0, 
  50, 50, 0, 
  -50, -50, 0,
  50, -50,0
]);
bufferGeometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
const indices = new Uint16Array([0, 2, 1, 2, 3, 1]);
bufferGeometry.setIndex(new THREE.BufferAttribute(indices, 1));
const material = new THREE.MeshBasicMaterial();
const bufferPlane = new THREE.Mesh(bufferGeometry, material);
// 移动顶点
bufferGeometry.translate(50,0,0) 
scene.add(bufferPlane);
// 物体的局部坐标仍然在(0,0,0)  几何体的顶点坐标x轴都加了50
console.log(bufferPlane.position,bufferGeometry.attributes.position)

在这里插入图片描述

几何体平移与物体平移

几何体平移geometry.translate(50,0,0) 移动几何体
1.世界坐标没变化，还是(0,0,0)
2.本质是改变了顶点坐标
在这里插入图片描述

模型平移mesh.ttanslateX(50) 沿X轴移动50个单位
1.世界坐标变为（50,0,0）
2.对象坐标系(局部空间/几何对象坐标系)跟随，整体移动
在这里插入图片描述

几何体旋转与模型旋转(缩放同理)

-方法本质修改
几何体旋转bufferGeometry.rotateX( rad : Float)顶点坐标
物体旋转object3D…rotateX/.rotateY /.rotateZ ( rad : Float)rotation

几何体旋转

const bufferGeometry = new THREE.BufferGeometry();
const vertices = new Float32Array([
  -50, 50, 0, 
  50, 50, 0, 
  -50, -50, 0,
  50, -50,0
]);
bufferGeometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
const indices = new Uint16Array([0, 2, 1, 2, 3, 1]);
bufferGeometry.setIndex(new THREE.BufferAttribute(indices, 1));
const material = new THREE.MeshBasicMaterial();
const bufferPlane = new THREE.Mesh(bufferGeometry, material);
// 几何体旋转
bufferGeometry.rotateX(Math.PI / 2);
scene.add(bufferPlane);
console.log(bufferPlane.rotation,bufferGeometry.attributes.position)

在这里插入图片描述
物体旋转

const bufferGeometry = new THREE.BufferGeometry();
const vertices = new Float32Array([
  -50, 50, 0, 
  50, 50, 0, 
  -50, -50, 0,
  50, -50,0
]);
bufferGeometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
const indices = new Uint16Array([0, 2, 1, 2, 3, 1]);
bufferGeometry.setIndex(new THREE.BufferAttribute(indices, 1));
const material = new THREE.MeshBasicMaterial();
const bufferPlane = new THREE.Mesh(bufferGeometry, material);
// 物体旋转
bufferPlane.rotateX(Math.PI / 2) 
scene.add(bufferPlane);
console.log(bufferPlane.rotation,bufferGeometry.attributes.position)

在这里插入图片描述

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

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

相关文章

探索设计模式的魅力：状态模式揭秘-如何优雅地处理复杂状态转换

探索设计模式的魅力：状态模式揭秘-如何优雅地处理复杂状态转换

​🌈 个人主页：danci_ 🔥 系列专栏：《设计模式》 💪🏻 制定明确可量化的目标，并且坚持默默的做事。 探索设计模式的魅力：状态模式揭秘-如何优雅地处理复杂状态转换 文章目录 一、案例…
阅读更多...
使用 ES|QL 优化可观察性：简化 Kubernetes 和 OTel 的 SRE 操作和问题解决

使用 ES|QL 优化可观察性：简化 Kubernetes 和 OTel 的 SRE 操作和问题解决

作者：Bahubali Shetti 作为一名运营工程师（SRE、IT 运营、DevOps），管理技术和数据蔓延是一项持续的挑战。 简单地管理大量高维和高基数数据是令人难以承受的。 作为单一平台，Elastic 帮助 SRE 将无限的遥测数据&#…
阅读更多...
亿道丨三防平板丨加固平板丨工业平板丨选购三大要素？

亿道丨三防平板丨加固平板丨工业平板丨选购三大要素？

在当今的市场中，企业在复杂多变的大环境中面临着许多挑战和机遇。其中包括尽管消费者对产品的需求不断增长，但劳动力短缺仍在继续的问题。大部分企业正在采用更具成本效益的方法，并希望利用他们获得的硬件和软件做更多的事情，因此…
阅读更多...
Stable Diffusion 3的到来巩固了 AI 图像对抗 Sora 和 Gemini 的早期领先优势

Stable Diffusion 3的到来巩固了 AI 图像对抗 Sora 和 Gemini 的早期领先优势

Stability AI 将其更改为 Stable Diffusion 3。VentureBeat 报道称，Stability AI 的下一代旗舰 AI 图像生成模型将使用类似于 OpenAI 的 Sora 的扩散变压器框架。其当前模型仅依赖于扩散架构。虽然尚未发布，但您可以在等候名单中注册。 官方网址链接&am…
阅读更多...
28V、115V、270V坦克装甲车启动电源：为现代战争注入新能量

28V、115V、270V坦克装甲车启动电源：为现代战争注入新能量

28V、115V、270V坦克装甲车启动电源：为现代战争注入新能量 世界新格局的诞生后，现代战争已经从传统的陆地、海洋、空中扩展到了网络空间和外太空。在这种背景下，各种先进的武器装备不断涌现，为国家安全提供有力保障。28V、115V、2…
阅读更多...
微信小程序01: springboot获取accessToken方式 ,配合redis缓存使用

微信小程序01: springboot获取accessToken方式 ,配合redis缓存使用

全文目录,一步到位 1.前言简介1.1 专栏传送门1.1.1 上文小总结1.1.2 上文传送门 2. springboot获取accessToken2.0 accessToken简介2.1 准备工作2.2 具体代码使用与注释如下2.2.1 代码解释(一)[无需复制]2.2.2 代码解释(二)[无需复制] 2.3 最后一步 获取accessToken2.3.1 两行代…
阅读更多...
kubernetes负载均衡部署

kubernetes负载均衡部署

目录 1.新master节点的搭建 对master02进行初始化配置（192.168.88.31） 将master01的配置移植到master02 修改master02配置文件 2.负载均衡的部署 两台负载均衡器配置nginx 部署keepalived服务 所有node节点操作 总结 实验准备： k8s…
阅读更多...
【区块链】智能交易模式下的数据安全流通模型

【区块链】智能交易模式下的数据安全流通模型

【区块链】智能交易模式下的数据安全流通模型 写在最前面**区块链智能交易模式概述****数据安全流通的挑战****数据安全流通模型的核心要素****实现数据安全流通的区块链技术****区块链智能交易模式下数据安全流通模型的设计原则****数据安全流通模型的应用案例分析****面临的挑…
阅读更多...
海外媒体推广通过5个发稿平台开拓国际市场-华媒舍

海外媒体推广通过5个发稿平台开拓国际市场-华媒舍

随着全球化的进程，国际市场对于企业的吸引力日益增加。进入国际市场并获得成功并非易事。海外媒体推广发稿平台成为了一种重要的营销手段，能够帮助企业在国际市场中建立品牌形象、传递信息和吸引目标受众。本文介绍了五个海外媒体推广发稿平台&#xff0…
阅读更多...
什么是去中心化云计算？

什么是去中心化云计算？

去中心化云计算是一种新型的云计算方式，它与传统的中心化云计算不同，将数据和计算任务分布到多个节点上，而不是将数据集中存储在中心服务器上。这种云计算方式具有许多优势，包括提高数据安全性、降低运营成本、增强可扩展性和灵活…
阅读更多...
2_怎么看原理图之协议类接口之UART笔记

2_怎么看原理图之协议类接口之UART笔记

通信双方先约定通信速率，如波特率115200 一开始时，2440这边维持高电平 1> 开始发送时，由2440将（RxD0）高电平拉低，并持续一个T的时间（为了让PC机可以反应过来），T1/波…
阅读更多...
无公网IP情况下如何远程查看本地群晖NAS存储的文件资源

无公网IP情况下如何远程查看本地群晖NAS存储的文件资源

文章目录 前言本教程解决的问题是：按照本教程方法操作后，达到的效果是前排提醒： 1. 搭建群晖虚拟机1.1 下载黑群晖文件vmvare虚拟机安装包1.2 安装VMware虚拟机：1.3 解压黑群晖虚拟机文件1.4 虚拟机初始化1.5 没有搜索到黑群晖的解…
阅读更多...
提示工程（Prompt Engineering）、微调（Fine-tuning） 和 嵌入（Embedding）

提示工程（Prompt Engineering）、微调（Fine-tuning） 和 嵌入（Embedding）

主要参考资料： 还没搞懂嵌入（Embedding）、微调（Fine-tuning）和提示工程（Prompt Engineering）？: https://blog.csdn.net/DynmicResource/article/details/133638079 B站Up主Nenly同学…
阅读更多...
XUbuntu22.04之解决：systemd-journald占用cpu过高问题(二百一十三)

XUbuntu22.04之解决：systemd-journald占用cpu过高问题(二百一十三)

简介： CSDN博客专家，专注Android/Linux系统，分享多mic语音方案、音视频、编解码等技术，与大家一起成长！ 优质专栏：Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏：多媒…
阅读更多...
2024如何恢复旧版的Chrome的主题样式

2024如何恢复旧版的Chrome的主题样式

起因 chrome 更新版本之后的主题样式变成了浅紫色的页签卡样式，感觉很不习惯，也很不喜欢 如何换回旧版主题 通过主题商店，安装旧版本的主题 主题商店搜索下面，或着直接访问下面的地址 Chrome Original White Theme https://…
阅读更多...
【原理图专题】OrCAD Capture原理图属性过滤器

【原理图专题】OrCAD Capture原理图属性过滤器

在使用Orcad Capture CIS进行原理图设计时，在拷贝了其他器件或网络时，往往连同属性一起带入到自己的设计中。 如下所示其中很多属性是没有用到的。比如我们在导BOM或平时看的时候，根本不关注器件是哪个作者（author）画的。还有一些如Graphic等等。 原理图中属性太多，而想…
阅读更多...
【力扣hot100】刷题笔记Day11

【力扣hot100】刷题笔记Day11

前言 科研不顺啊......又不想搞了，随便弄弄吧，多花点时间刷题，今天开启二叉树！ 94. 二叉树的中序遍历 - 力扣（LeetCode） 递归 # 最简单递归 class Solution:def inorderTraversal(self, root: TreeNode) …
阅读更多...
DBAPI如何使用数组类型参数

DBAPI如何使用数组类型参数

DBAPI如何使用数组类型参数 需求 根据多个id去查询学生信息 API创建 在基本信息标签&#xff0c;创建参数ids &#xff0c;参数类型选择 Array<bigint> 在执行器标签&#xff0c;填写sql&#xff0c;使用in查询 select * from student where id in <foreach ope…
阅读更多...
多种方法合并Python中的两个列表、字典

多种方法合并Python中的两个列表、字典

直接看例子 两个字典的合并&#xff1a;已知字典 a{a: 1, b: 2, c: 3} 和 b{d: 4, e: 5, f: 6} 合并方法1&#xff1a; dict(a, **b) 操作如下&#xff1a; >>> a{a:1,b:2,c:3} >>> b{d:4,e:5,f:6} >>> dict(a,**b) {a: 1, b: 2, c: 3, d: 4, e:…
阅读更多...
ETA1061V50S2G 输出5V 钰泰 同步升压转换器 1MHZ

ETA1061V50S2G 输出5V 钰泰 同步升压转换器 1MHZ

描述 ETA1061是一种高效率的同步升压转换器&#xff0c;具有超低静态电流小于1μA。如果从低电压源提供至少2W的功率&#xff0c;即在5V输出时提供0.4A的功率它还具有一个真正的切断功能&#xff0c;从输出断开输入&#xff0c;在关机和输出短路条件。这消除了对外部MOSFET及其…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023