geometry.attributes.normal

测试：Basic 材质改为 Lambert 材质

可以测试下,把前面两节课的案例源码中 MeshBasicMaterial 材质改为 MeshLambertMaterial 材质,你会发现原来的矩形平面无法正常渲染,这其实很简单,使用受光照影响的材质,几何体 BufferGeometry 需要定义顶点法线数据.

// MeshBasicMaterial不受光照影响
// 使用受光照影响的材质，几何体Geometry需要定义顶点法线数据
const material = new THREE.MeshLambertMaterial({
  color: 0x0000ff,
  side: THREE.DoubleSide, //两面可见
});

数学上的法线概念

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

Three.js 的顶点法线

Three.js 中法线和数学中法线概念相似,只是定义的时候更灵活,会根据需要进行调整,作为初学者,只要先有顶点法线的概念就行,下面会举一个简单小例子

矩形平面几何体法线案例——无顶点索引

Three.js 中法线是通过顶点定义,默认情况下,每个顶点都有一个法线数据,就像每一个顶点都有一个位置数据一样

// 矩形平面，无索引，两个三角形，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.attributes.normal = new THREE.BufferAttribute(normals, 3);

矩形平面几何体法线案例——有顶点索引

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