Smooth shading in three.js from blender

Question

I have a scene in Blender that renders smoothly but when brought into a three.js scene the curved faces are flat. Is there a way to make these curved sides smooth as shown below?

I have calculated vertex normals and set the smoothShaded flag, neither changes the appearance. I've tried lambert, phong, and standard materials.

Desired look:

In threejs. scene:

Edit: I've tried the following:

this.traverse(function(child) {
    if(child instanceof THREE.Mesh)
    {
         child.material.smoothShading = true;
    }
});

this.geometry.computeVertexNormals();
this.geometry.verticesNeedUpdate = true;

@Mugen87 I am importing an OBJ using the editor at threejs.org/editor — theLucre
Can you please try it with glTF? It's the recommended 3D format of three.js. You can find all relevant information in this guide. Use this example as a code template. You should actually not use OBJ anymore since it's in many ways worse than glTF(bigger file sizes, longer parsing times, no animation support etc.). — Mugen87
Thanks, I am now using the glTF exporter! My problem was in Blender after all. Solution below. — theLucre

theLucre theLucre · Accepted Answer · 2018-11-29T14:58:45

The issue is in Blender. I needed to smooth the faces of rounded extrusions and set hard edges on the corners in the Shading panel.

Smooth shading in three.js from blender

1 Answers