geometry.computeVertexNormals() not working for extruded geometry

Description of the problem

geometry.computeVertexNormals() not working for extruded geometry created using absarc.

Best explained with pictures and fiddle.

https://jsfiddle.net/k2r4cqnh/2/

I have also tried geometry.computeFaceNormals and shading: SmoothShading but no dice!

You get the same problem with the shape with/without a hole.

Three.js version

• r81

Browser

• All of them

OS

• Windows

[henryJack]

@WestLangley - I agree that we shouldn’t modify geometry.computeVertexNormals() directly but there should be a THREE method to achieve smoothing the faces of an extruded shape without artefacts. I am now using a smoothExtrudedGeometry() function based on the discussion in this thread. A nice example of this is the elimination of some bezier scaring on some 3D extruded helical gears. See before and after below…

before smoothExtrudedGeometry()

after smoothExtrudedGeometry()

three.js is a rendering engine, not a modeling tool. I think the best solution is for you to develop your model using modeling software, and import it into three.js.

I think the above image of gears shows that THREE.js can be a fantastic direct modelling tool. Given the many parameters used to describe certain geometries (such as gear teeth) it would not be practical to develop templates of such models if you want to dynamically change their attributes based on some user input. Or have I misunderstood something about THREE.js?

[zz85]

@henryJack if you add after geometry.computeVertexNormals();

for ( var i = 0; i < geometry.faces.length; i ++ ) {
    var face = geometry.faces[ i ];
    if (face.materialIndex == 1 ) {
        for ( var j = 0; j < face.vertexNormals.length; j ++ ) {
            face.vertexNormals[ j ].z = 0;
            face.vertexNormals[ j ].normalize();
        }
    }
}

you will see that the ring is smooth. I can’t remember how to make the sides flat though…