three.js - 具有修改顶点的平面上的片段着色器

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

我希望每个尖峰的一些面都涂成黑色，但我得到了纯色。我在我的平面上放置了一个球体并应用了相同的着色器：

当我关闭线框时：

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

现场演示

Answer 1

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

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

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

THREE.GeometryUtils.triangulateQuads( geometry );

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

三.js r.58