在飞机上的片段着色器与修改过的顶点

Question

我有一个PlaneGeometry，我随机动画顶点以创建随机尖峰。 我使用这个FragmentShader：

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

我希望每个穗的一些面都是黑色的，但我却得到了纯色。我在我的飞机上放置了一个球体并应用了相同的着色器：

当我关闭线框时：

不确定我明白飞机上发生了什么？！我认为，由于每个尖峰具有不同的法线，它们也应该具有不同的光照。

Live Demo

Answer 1

你的“尖峰”没有不同的顶点法线，因为你没有改变顶点法线;它们都是（0,1,0）。这是你可以在控制台中自己检查的东西。

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

您可以通过先对PlaneGeometry进行三角测量来避免这些问题：

THREE.GeometryUtils.triangulateQuads( geometry );

请注意，此函数会重新计算顶点法线。查看源代码，以便了解它的作用。

three.js r.58