javascript - Threejs PlaneGeometry 不接收阴影或反射

Question

我是 3d 和 threejs 的新手，我不知道如何让 PlaneGeometry 显示单独照明的多边形，即接收阴影或显示反射。我基本上做的是采用 PlaneGeometry 对顶点的每个 z 值应用一些噪声。然后我在我的场景中有一个简单的定向光，它应该使平面上出现的噪声模式可见。我尝试了不同的东西，例如 plane.castShadow = true 或 renderer.shadowMapEnabled = true 但没有成功。我只是错过了一个简单的选项，还是这种方式比我想象的要复杂？

这是我的代码的相关部分

renderer.setSize(width, height);
renderer.setClearColor(0x111111, 1);

...

var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.9);
directionalLight.position.set(10, 2, 20);
directionalLight.castShadow = true;
directionalLight.shadowCameraVisible = true;

scene.add( directionalLight );


var geometry = new THREE.PlaneGeometry(20, 20, segments, segments);

var index = 0;
for(var i=0; i < segments + 1; i++) {
    for(var j=0; j < segments + 1; j++) {

        zOffset = simplex.noise2D(i * xNoiseScale, j * yNoiseScale) * 5;
        geometry.vertices[index].z = zOffset;

        index++;
    }
}

var material = new THREE.MeshLambertMaterial({
    side: THREE.DoubleSide,
    color: 0xf50066
});

var plane = new THREE.Mesh(geometry, material);
plane.rotation.x = -Math.PI / 2.35;
plane.castShadow = true;
plane.receiveShadow = true;
scene.add(plane);

这是我得到的输出。显然，该平面可以感知到光线，因为底面比上面暗，但没有迹象表明任何单独的多边形接受单独的光照，也看不到任何 3d 结构。有趣的是，当我放入不同的几何体时，如 BoxGeometry，各个多边形被单独照亮(见第二张图)。有什么想法吗？

Answer 1

好的，感谢 this post，我明白了.诀窍是在 Material 上使用 THREE.FlatShading 着色器。需要注意的重要一点是，在每次更新顶点之后，需要做两件事。在渲染之前，必须将 geometry.normalsNeedUpdate 设置为 true，这样渲染器也会合并新定向的顶点。此外，还需要在渲染之前调用 geometry.computeFaceNormals()，因为当您更改顶点时，法线不再相同。