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

geometryputeCentroids();
geometryputeFaceNormals();
geometryputeVertexNormals();

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:

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 .js/Marching-Cubes.html and the geometry and mesh are created around lines 250-280.)

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:

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.)

• javascript
• three.js
• webgl
• shader

1 Answer 1

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