Three.js地形阴影

Question

我使用了planegeometry对象完成了一个地形.我设置了一个顶点的y坐标来碰撞我的地形.然后我在我的场景中添加了一个方向灯,看到没有"山丘"等阴影.

我还添加了一个球体,并注意到这个地形上也没有阴影.

var light = new THREE.DirectionalLight(0xffffff, 1);
light.castShadow = true;
light.shadowCameraVisible = true;
light.position.set(-300, 120, -200); // CHANGED
scene.add(light);
scene.add( new THREE.DirectionalLightHelper(light, 0.2) ); 

定向光与球体在地形之上

但是当我用聚光灯取代定向光时,我看到了我想要拥有的地形上的阴影.

var slight = new THREE.SpotLight(0xffffff,1);
slight.position.set(-100,60,100);
slight.shadowCameraVisible = true;
scene.add(slight);
scene.add(new THREE.SpotLightHelper(slight, 0.5));

聚光灯与地形

所以问题是:

• 我怎么能做一个看起来像阳光的灯,所以地形不是平面颜色,而是依赖于光线？(将来它将成为真实城市的一部分)
• 我该怎么做才能看到物体在地形上的阴影？(从小提琴例子:球体的阴影)

谢谢

Answer 1

您正在修改地形的顶点.执行此操作时,还必须修改顶点法线.一种方法是这样的:

geometry.computeVertexNormals();

要创建阴影,您必须启用它们.

renderer.shadowMap.enabled = true;

更新小提琴:http://jsfiddle.net/a7brv8b9/3/

three.js r.92