Three.js - проблемы гладкого затенения материала Ламберта на пользовательской геометрии

Я создал пользовательскую геометрию в файле Three.js. Теперь я хотел бы создать сетку, в которой используется материал Lambert с гладким оттенком. Используя цикл, я создал массив вершин, затем лица, а потом я назвал

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

Результат почти идеальный, за исключением того, что кажется, что материал использует shading: THREE.FlatShading, как показано ниже:

enter image description here

в то время как я ожидал появления по умолчанию, которое обычно ожидают с помощью shading: THREE.SmoothShading. Что мне нужно добавить/изменить, чтобы получить гладкое затенение Ламберта?

(Если это помогает, полный живой пример находится в http://stemkoski.github.io/Three.js/Marching-Cubes.html, а геометрия и сетка создаются вокруг строк 250-280.)

Ответы

Ответ 1

Это потому, что соседние грани не разделяют вершины в вашей модели.

Если вы вызываете geometry.mergeVertices() сразу после завершения создания своей геометрии и до того, как вы назовете geometry.computeVertexNormals(), ваше затенение будет выглядеть гладко.

three.js r.58