Three.js 进阶(顶点法线、法向量、法向量辅助器)

本篇主要学习内容 :

1. 顶点法线
2. 法向量
3. 法向量辅助器

点赞 + 关注 + 收藏 = 学会了

1.顶点法线

顶点法线(法向量)数据geometry.attributes.normal。

1.1） 数学上法线概念

先来理解一下数学上的法线概念，比如一个平面，法线的就是该平面的垂线，如果是光滑曲面，一点的法线就是该点切面的法线。

1.2） Three.js顶点法线

Three.js中法线和数学中法线概念相似，只是定义的时候更灵活，会根据需要进行调整 Three.js中法线是通过顶点定义，默认情况下，每个顶点都有一个法线数据，就像每一个顶点都有一个位置数据。

// 计算法向量
geometry.computeVertexNormals()

2.法向量

// 矩形平面，无索引，两个三角形，6个顶点
// 每个顶点的法线数据和顶点位置数据一一对应
const normals = new Float32Array([
    0, 0, 1, //顶点1法线( 法向量 )
    0, 0, 1, //顶点2法线
    0, 0, 1, //顶点3法线
    0, 0, 1, //顶点4法线
    0, 0, 1, //顶点5法线
    0, 0, 1, //顶点6法线
]);
// 设置几何体的顶点法线属性.attributes.normal
geometry.setAttribute('normal', new THREE.BufferAttribute(normals, 3))

3. 法向量辅助器

//顶点法向量辅助器
import { VertexNormalsHelper } from 'three/examples/jsm/helpers/VertexNormalsHelper.js'

// 创建法向量辅助器
let helper = new VertexNormalsHelper(plane, 2, 'red')
scene.add(helper)

 感谢：b站up主：老陈打码 以及 threejs中文网 教学及参考文档
到此进阶（二）学习告一段落，道阻且长，行则将至。与诸君共勉。 ⭐️