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

原创

已于 2024-04-08 21:46:10 修改 · 3.8k 阅读

33 ·

CC 4.0 BY-SA版权

文章标签：

#uv #ThreeJS

于 2024-02-23 16:47:28 首次发布

本文详细介绍了Three.js中几何体的顶点坐标、法向量的设置、UV映射的原理及其在创建平面几何体时的应用，包括不设置法向量的对比、使用computeVertexNormals方法计算法向量以及自定义normal属性。同时探讨了光照计算中法向量的重要性，以及如何使用VertexNormalsHelper辅助工具进行调试。

文章目录

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

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