Three.js - 在自定义几何图形上平滑着色 Lambert 材质的问题答案

【问题标题】：Three.js - problems smooth shading a Lambert material on custom geometryThree.js - 在自定义几何图形上平滑着色 Lambert 材质的问题
【发布时间】：2013-06-11 17:44:04
【问题描述】：

我在 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，如下所示：

虽然我期待 shading: THREE.SmoothShading 的默认外观。我需要添加/更改什么以获得平滑的 Lambert 着色？

（如果有帮助，完整的实时示例位于 http://stemkoski.github.io/Three.js/Marching-Cubes.html，几何和网格围绕第 250-280 行创建。）

【问题讨论】：

标签： javascript three.js webgl shader

【解决方案1】：

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

如果您在完成几何体创建之后立即调用geometry.mergeVertices()，并且在调用geometry.computeVertexNormals() 之前调用，那么您的着色会看起来更平滑。

three.js r.58

【讨论】：

完美，非常感谢！你应该得到一个 StackOverflow three.js 天才徽章 :)