Three.js - 问题在自定义几何体上平滑着色Lambert材质

时间:2013-06-15 01:03:12

标签: javascript three.js webgl shader

我在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通常期望的默认外观。我需要添加/更改什么才能获得平滑的Lambert着色?

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

1 个答案:

答案 0 :(得分:25)

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

如果您在完成几何图形创建后立即致电geometry.mergeVertices(),并且在致电geometry.computeVertexNormals()之前,那么您的阴影看起来会更加平滑。

three.js r.58