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

news/2024/4/17 8:30:28

文章目录

  • 几何体的顶点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;

在这里插入图片描述
贴图正确显示,查看positionuv发现设置贴图时已自动计算出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)

在这里插入图片描述


https://www.xjx100.cn/news/3293524.html

相关文章

Unity中URP实现水体(水的焦散)

文章目录 前言一、原理1、 通过深度图,得到 对应像素 在 世界空间下的Z值2、得到模型顶点在 观察空间 下的坐标3、由以上两点得到 深度图像素 对应的 xyz 值4、最后,转化到 模型本地空间下,用其对焦散纹理采样 二、实现1、获取深度图2、在顶点…

神经网络系列---卷积

文章目录 卷积神经网络卷积转置卷积 卷积核和反卷积的三种实现方式卷积的次数计算 卷积神经网络 在神经网络的卷积层中,向下取整(Floor)是一种常用的策略,特别是在处理输出尺寸不是整数的情况时。当你计算出卷积层输出的尺寸&…

网安入门16-XSS(三种类型)

什么是XSS漏洞——来自Google Gemini XSS漏洞,全称跨站脚本攻击(Cross-Site Scripting),是代码注入的一种。它允许恶意用户将代码注入到网页上,原理是攻击者将恶意代码注入到可信网站的页面中,当用户浏览该…

使用sunshine和moonlight实现远程游戏串流

过年回家想要打游戏,但是苦于家里没有电脑,又没办法把电脑搬回去,于是想到了使用串流的方式。 实现串流的软件有多种: moonlight。因为仅实现了 NVIDIA 的游戏串流协议,所以只支持 N 卡。Steam Link。支持 steam 的游…

Hive的Rank排名(rank函数,dense_rank函数,row_numer函数)

一、区别: 三者通常都会配合窗口函数over(),并结合partition by order by xxx来分组排序,即形式使用:function_name over(partition by xxx order by xxx)。首先三者都是产生一个自增序列,不同的是 row_number() 排序…

许战海矩阵|佐香园:“熟酱”的爆品战略

佐香园是辽宁帝华味精食品有限公司的主导品牌,是一个拥有自主研发与生产经营能力的民营企业,主要生产和销售香料、调味料以及食品添加剂等产品。该品牌自创办以来,一直坚持以市场为导向,走专业化发展之路,打造全方位的…

深度学习 精选笔记(5)多层感知机

学习参考: 动手学深度学习2.0Deep-Learning-with-TensorFlow-bookpytorchlightning ①如有冒犯、请联系侵删。 ②已写完的笔记文章会不定时一直修订修改(删、改、增),以达到集多方教程的精华于一文的目的。 ③非常推荐上面(学习参考&#x…

在Redhat 7 Linux上安装llama.cpp

正常安装的错误信息 安装 gcc 和gcc-c 之后,你运行Make 命令编译llama.cpp的时候,你会发现下面问题。 yum -y install gcc --nogpgcheckyum -y install gcc-c --nogpgcheck 错误信息, 因为gcc 的版本是4.8 cc -I. -Icommon -D_XOPEN_SOU…