Three.js几何体Geometry法线计算方法.computeFlatVertexNormals()

几何体类GeometryBufferGeometry提供了一个或多个几何体法线计算的相关方法。

更新几何体法线数据

无论几何体Geometry还是BufferGeometry,如果顶点的位置数据改变或更新都需要重新计算顶点的法线数据,执行.computeFaceNormals().computeVertexNormals等方法,Three.js会根据顶点绘制计算每个三角形或三角形对应顶点的法线数据。

.computeFlatVertexNormals()

几何体Geometry.computeFlatVertexNormals()方法和.computeFaceNormals().computeVertexNormals都是为了计算几何体顶点法线数据。只是计算规则不同,比如Three.js圆柱几何体默认渲染为光滑圆柱效果,如果几何体执行.computeFlatVertexNormals()方法,圆柱体可以渲染为正多棱柱效果。

你可以测试下面代码,代码geometry.computeFlatVertexNormals()执行和不执行两种情况下,比较圆柱的渲染效果。

var geometry = new THREE.CylinderGeometry(10, 10, 1, 8);
geometry.computeFlatVertexNormals()//圆柱体渲染为正多棱柱效果
var material = new THREE.MeshLambertMaterial({
  color: 0xffff00,   
});
var mesh = new THREE.Mesh(geometry, material);

.computeVertexNormals()

通常一个网格模型几何体由多个三角形构成,三角形会共享一些顶点位置数据,通过计算三角形面法线就可以得到三角形三个顶点法向量,如果执行.computeVertexNormals()计算几何体顶点法线,以其中一个顶点为例说明,Threejs会计算共享该顶点所有三角形的面法线,所有三角形的面法线平均值作为该顶点的法向量,通过这种计算方式来平滑顶点法线。

你可通过下面一个立方体进行渲染测试。

var geometry = new THREE.BoxGeometry(100, 100, 100)//默认渲染效果棱角分明
geometry.computeVertexNormals()//执行该方法立方体棱角感不明显
geometry.computeFlatVertexNormals()//执行该方法恢复立方体默认的渲染效果