Threejs PlaneGeometry 不接收阴影或反射答案

【问题标题】：Threejs PlaneGeometry doesn't receive shadows or reflectionsThreejs PlaneGeometry 不接收阴影或反射
【发布时间】：2014-11-18 14:52:59
【问题描述】：

我对 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）时，单个多边形会被单独照亮（参见第二张图片）。有什么想法吗？

【问题讨论】：

标签： javascript 3d three.js

【解决方案1】：

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

【讨论】：