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

admin管理员组

文章数量:1208155

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

Share Improve this question Follow asked Jun 15, 2013 at 1:03 StemkoskiStemkoski 9,04533 gold badges4848 silver badges6262 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 25

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

本文标签： javascriptThreejsproblems smooth shading a Lambert material on custom geometryStack Overflow