Three.js Calculating Vertex Normals

Question

I'm experimenting with one of the examples, namely the webgl_loader_obj.html to load an .obj file exported from blender into three.js

This works and displays the model exactly as expected. Now i was looking at the use of material.shading = THREE.SmoothShading.

For this to work, the model needs to have vertex normals. the exported file from blender has no normals defined.

So i looked at using computeVertexNormals to calculate the required normals. however this doesn't appear to be doing anything, the resulting view is of the unsmoothed model.

further to this, as a test, i exported the same model, with normals. loading it straight in, it appeared smoothed.

If i then did computeFaceNormals() & computeVertexNormals() it would result in the unsmoothed mesh again.

var loader = new THREE.OBJLoader( manager );
            loader.load( 'test.obj', function ( object ) {

                object.traverse( function ( child ) {

                    if ( child instanceof THREE.Mesh ) {
                        child.material = new THREE.MeshLambertMaterial( { color: 0xff6600 });

                        child.geometry.computeFaceNormals();
                        child.geometry.computeVertexNormals();
                        child.material.shading = THREE.SmoothShading;


                    }

                } );

WestLangley WestLangley · Accepted Answer · 2015-03-23T22:21:30

Geometry.computeVertexNormals() "smooths" the vertex-normals by computing each vertex-normal to be the average of the face-normals of all faces that share that vertex.

If each face of your geometry has unique vertices (i.e., no vertices are shared with a neighboring face), then computeVertexNormals() will result in each face's vertex-normals being the same as the face-normal, and the mesh shading will appear faceted.

three.js r.71

Three.js Calculating Vertex Normals

1 Answers