Three.js 具有修改顶点的平面上的碎片着色器

我有一个平面几何体，我随机设置顶点动画，以创建随机尖峰。 我使用这个片段着色器：

void main() {
       vec3 light = vec3(cos(time),sin(time),1.0);
       light = normalize(light);
       float dProd = max(0.0, dot(vNormal, light));
        gl_FragColor = vec4(dProd,dProd,dProd,1.0);
        }

我本以为每个尖刺的一些面都是黑色的，但我得到的却是纯色。我在平面上放置了一个球体，并应用了相同的着色器：

关闭线框时：

我不知道飞机上发生了什么？！我认为，由于每个尖峰都有不同的法线，它们也应该有不同的照明

您的“尖峰”没有不同的顶点法线，因为您没有更改顶点法线；它们都是（0，1，0）。这是您可以在控制台中自己检查的内容

此外，修改四边形（平面的一个面）的顶点时，这四个顶点可能不再是平面的。这会给你带来各种各样的问题。（谷歌非平面四边形。）

通过首先对

平面几何图形进行三角剖分，可以避免这些问题：

THREE.GeometryUtils.triangulateQuads( geometry );

请注意，此函数将重新计算顶点法线。查看源代码，以便了解它在做什么

three.js r.58
谢谢你的明确回答。我认为，从THREE.js开始使用非平面四边形并不是最好的主意。