Three.js - problems smooth shading a Lambert material on custom geometry

10
votes

I have created a custom geometry in Three.js. Now, I would like to create a mesh that uses a smooth-shaded Lambert material. Using a loop, I have created the array of vertices, then faces, and afterwards I have called

geometry.computeCentroids();
geometry.computeFaceNormals();
geometry.computeVertexNormals();

var colorMaterial =  new THREE.MeshLambertMaterial( {color: 0x0000ff, side: THREE.DoubleSide} );
var mesh = new THREE.Mesh( geometry, colorMaterial );
scene.add(mesh);

The result is almost perfect, except that it appears as though the material is using shading: THREE.FlatShading as seen below:

enter image description here

while I was expecting the default appearance one normally expects with shading: THREE.SmoothShading. What do I need to add/change to obtain a smooth Lambert shading?

(If it helps, a complete live example is at http://stemkoski.github.io/Three.js/Marching-Cubes.html and the geometry and mesh are created around lines 250-280.)

1
javascriptthree.jswebglshader

1 Answers

25
votes

It's because neighboring faces do not share vertices in your model.

If you call geometry.mergeVertices() right after you complete the creation of your geometry, and before you call geometry.computeVertexNormals(), then your shading will look smoother.

three.js r.58