javascript - 在 Three.js 中计算自定义几何体的光

Question

我创建了一个自定义几何体，并使用geometry.computeFaceNormals()来获得正确的光照。到目前为止，一切都很好。

当我对几何体进行动画处理时，问题就出现了。在动画循环中，我再次调用geometry.computeFaceNormals()，但面部的光照没有改变。

这是一个fiddle举个例子:

Answer 1

您正在更新几何体的顶点，因此通常情况下，您的法线也必须更新才能使着色正确。

但是，由于您想要平面着色，因此还有另一种解决方案。

MeshPhongMaterial 使用 OES_standard_derivatives 扩展生成平面着色。这意味着当顶点更改时不必指定或更新几何法线。

您所要做的就是使用以下模式，并且平面着色将“正常工作”——前提是支持扩展。

var material = new THREE.MeshPhongMaterial( {
    color: 0xFFFFFF,
    shading: THREE.FlatShading
} );

三.js r.80