javascript - Three.js - 在自定义几何体上对 Lambert Material 进行平滑着色时出现问题

Question

我在 Three.js 中创建了一个自定义几何体。现在，我想创建一个使用平滑阴影 Lambert Material 的网格。使用循环，我创建了顶点数组，然后是面，然后我调用了

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

结果几乎是完美的，除了它看起来好像 Material 正在使用 shading: THREE.FlatShading 如下所示:

当我期待默认外观时，人们通常希望使用 shading: THREE.SmoothShading。我需要添加/更改什么才能获得平滑的 Lambert 阴影？

(如果有帮助，完整的实例位于 http://stemkoski.github.io/Three.js/Marching-Cubes.html，几何体和网格是在第 250-280 行周围创建的。)

Answer 1

这是因为相邻的面在您的模型中不共享顶点。

如果您在完成几何创建之后立即调用 geometry.mergeVertices()，然后再调用 geometry.computeVertexNormals()，那么您的着色将看起来更顺畅。

three.js r.58