Search code examples
javascriptthree.jsnormalsvertices

VertexNormals calculation on Three.js

I'm not sure if this is an error or not, but once you call geometry.computeVertexNormals() in a THREE.BoxGeometry, and you calculate the vertex normals, I think the resulting vectors are wrong.

Take this as an example:

geometry = new THREE.BoxGeometry(50, 50, 50);
geometry.computeVertexNormals();
material = new THREE.MeshNormalMaterial();

as you see everything looks done properly, however if you rotate the X axis you see that the vectors are pointing in different directions.

mesh.rotation.x = 90 * Math.PI / 180;

Shouldn't we expect the vector to point exactly from the center of the 3 existing vectors before the geometry merge? Something like this:
vector
If not, any explanation on why this happens?

Thanks in advance.

Solution

  • computeVertexNormals computes the average of the face normals of the faces connected to each vertex. For the box mesh, not all the vertices are connected to the same number of faces, so you have a different normal average. Drawing the wireframe makes this easier to see.