BufferGeometry always creates FlatShading normals. I need SmoothShading

Question

I use ThreeJS r68.

I always used THREE.Geometry for my project and it just works fine. Now I want to change from THREE.Geometry to THREE.BufferGeometry because I read that this is the better choice. But I couldn't get SmoothShading to work with my THREE.BufferGeometry.

I load my Object into a BufferGeometry and call bufferGeometry.computerVertexNormals. And then my result is FlatShading.

I read in the computeVertexNormals() method that BufferGeometry calculates differently if I use an "index" attribute. I tried to create an "Indexed" BufferGeometry but that just made everything worse. I don't know if I just created that right. I just added the indices like I would add them to the faces in a normal Geometry. The BufferGeometry.fromGeometry() method does not create an indexed BufferGeometry so I don't know where to look.

Do I need an indexed BufferGeometry for SmoothShading?

UPDATE

[... some time later....]

I think I could create a indexed THREE.BufferGeometry now. It's more like Geometry. And smooth shading looks fine with an indexed BufferGeometry. So now i have SmoothShading but a invalid uv-map. But why is the uv-map different in an indexed BufferGeometry to compared to not indexed BufferGeometry? BufferGeometry is really not easily loaded.

Answer 1

OK.

Here is what i got:

1.) SmoothShading only works for indexed THREE.BufferGeometry. (as far as I know) And not for non indexed BufferGeometry.

2.) An indexed THREE.BufferGeometry only has 1 uv point per vertex, and not 1 uv point per face-vertex.
That means if you have a square with 4 points, then you only have 4 uv points and not 6 like in THREE.Geometry and non indexed THREE.BufferGeometry. (That is confusing and will not allow complicated uv-maps)

UPDATE

[... a few hours of sleep later ...]

I looked into THREE.BufferGeometry.computerVertexNormals() again. And I have to correct myself.

indexed THREE.BufferGeometry:

1) only 1 uv per vertex
2) only 1 normal per vertex
result :
- only smoothShading possible.
- only simple uv maps.
- limit of 65.535 vertices.

non indexed THREE.BufferGeometry:

1) 1 uv per face vertex
2) 1 normal per face vertex
result:
- calculating normals in ThreeJS(r68): only FlatShading
- calculating normals outside of ThreeJS and import the normals: FlatShading and SmoothShading
- complicated uv maps possible

Answer 2

You can apply THREE.FlatShading to your material to get a flat shaded indexed THREE.BufferGeometry. In that case you don't need to define any normals at all.

This saves you a lot of headaches and overhead:

geometry = new THREE.BufferGeometry

material = new THREE.MeshPhongMaterial({ 
    color: 0xff0000, 
    shading: THREE.FlatShading
});

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

Your mesh will render flat shaded. This doesn't work for THREE.MeshLambertMaterial yet. But they are working on it. Check the related issue here on GitHUB.