Smooth shading not working even with explicit flatShading: false

Describe the bug

According to docs, smooth shading is the default. Unfortunately, I cannot set it up.

To Reproduce

I just started with three.js, but to my understanding it should be fairly straightforward. Shade smooth is the default, and also can be explicitly defined by material({ flatShading: false })

I created a non-indexed geometry procedurally using BufferGeometry like below.
Note I have called computeVertexNormals(true) (the true comes from some stackoverflow answer, but it doesn’t help so idk)

Is it somehow related to the fact it’s non-indexed?

Live example

https://jsfiddle.net/high_byte/e6chLudk/

Code

geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
geometry.computeVertexNormals(true);

var material = new THREE.MeshLambertMaterial({
  color: 0xdf5000,
  flatShading: true,
  side: THREE.DoubleSide,
});

mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

2 thoughts on “Smooth shading not working even with explicit flatShading: false

  1. Is it somehow related to the fact it’s non-indexed?

    Yes, in a non-indexed geometry every triangle has unique vertices from every other triangle. This basically makes smooth shading impossible causes computeVertexNormals() to compute flat normals, not smooth ones. Try using BufferGeometryUtils.mergeVertices( geometry ) first, then computing vertex normals. If you are having trouble with that, please use the forum or stack overflow.

  2. @donmccurdy

    Yes, in a non-indexed geometry every triangle has unique vertices from every other triangle. This basically makes smooth shading impossible.

    nit. I think that should be rewritten like so:

    Yes, in a non-indexed geometry every triangle has unique vertices from every other triangle. In that case, the normals generated by computeVertexNormals() will result in flat shading.