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这样的不同几何体时，单独的多边形被单独照亮（见第2张图像）。 有任何想法吗？

Answer 1

好的，我想通过这篇文章了解它 。 诀窍是在材质上使用THREE.FlatShading着色器。 需要注意的是，每次更新顶点后，都需要做两件事。 在渲染geometry.normalsNeedUpdate之前，必须将其设置为true，以便渲染器还包含新定向的顶点。 此外， geometry.computeFaceNormals()需要在渲染之前调用，因为当您更改顶点时，法线不再相同。