Three.js - 问题在自定义几何体上平滑着色Lambert材质 [英] Three.js - problems smooth shading a Lambert material on custom geometry

问题描述

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

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

结果几乎是完美的，除非看起来好像材料使用阴影：THREE.FlatShading 如下所示：

The result is almost perfect, except that it appears as though the material is using shading: THREE.FlatShading as seen below:

我期待着色时通常需要的默认外观：THREE.SmoothShading 。我需要添加/更改以获得平滑的Lambert着色？

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?

（如果有帮助，完整的实例将在 http://stemkoski.github.io/Three.js/Marching-Cubes.html 以及几何和网格是围绕250-280行创建的。）

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

推荐答案

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

It's because neighboring faces do not share vertices in your model.

如果您在完成几何图形创建后立即调用 geometry.mergeVertices（），并且在调用<$ c $之前c> geometry.computeVertexNormals（），那么你的着色看起来会更平滑。

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

three.js r.58

这篇关于Three.js - 问题在自定义几何体上平滑着色Lambert材质的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！