computeVertexNormals with extrudeGeometry not working?

Hey, I’m using extrudeGeometry to generate a mesh from a Shape. I tried running compute VertexNormals to get rid of the flat shading but it doesn’t do anything. Am I doing something wrong ?

const baseShape = new THREE.Shape();
const w = 0.8
const br = 0.1
baseShape.absarc( w, w, br, 0, Math.PI/2);
baseShape.absarc(-w, w, br, Math.PI/2, Math.PI)
baseShape.absarc(-w, -w, br, Math.PI, 3*Math.PI/2)
baseShape.absarc(w, -w, br, 3*Math.PI/2, 2*Math.PI)
var extrudeSettings = {
steps: 4,
depth: 1,
bevelEnabled: true,
bevelThickness: 0.1,
bevelSize: 0.1,
bevelSegments: 8,
curveSegments: 16,

var geometry = new THREE.ExtrudeGeometry( baseShape, extrudeSettings )
//Here I apply computeVertexNormals()

var material = new THREE.MeshStandardMaterial()
var mesh= new THREE.Mesh( geometry, material )

All geometry generators provide a set or normals and it is not intended that computeVertexNormals() is called on application level.

You probably have to generate your geometry in a different way or design it in a DCC tool like Blender.

Ok too bad, in this application, the mesh is procedurally generated by the user. I expose parameters like bevel, depth,… So I can’t model it beforehand. Do you have any suggestion on how I could achieve this ? Does the geometry need to be indexed ? Thanks for your help :slight_smile:

I’m not sure what the final look you’re going for is but you should be able to remove the existing normals attribute, use BufferGeometryUtils.mergeVertices, and then compute vertex normals to get a smoother look.

If you still need some corners to be sharp you can try the toCreasedNormalGeometry function in this PR:


Hey, thanks a lot! Just tried that and it works! But it leaves a few seams. I tried playing with it but couldn’t find any solution against that. If you have any explanation on what it actually does and why I still have some of those seams, I’d love to hear from you.

Its possible the structure of the model is causing an issue. Can you make a jsfiddle showing the problem?