我在Three.js中对SpotLights和shadows做了一些错误的事情

Question

我有一个非常简单的场景，里面有一个.dae网格，网格下面有一个7000*7000平面。我希望它由一个高的SpotLight照亮，这样网格就会在地面上投下一个阴影。但是，似乎有什么东西坏了！无论我把SpotLight放得多高，它都不会点亮飞机！此外，它只点亮了网格，而它在一个小正方形(周长)中。

你可以在这里看到这种情况：

​

一旦我移动网格(一个怪物)，它将不再被点亮。

这是我实例化灯光的方式：

// create a spotlight
self.spotLight = new THREE.SpotLight();

// set its position
self.spotLight.position.y = 1000; //I recon it needs to be relatively high so it lights up everything
self.spotLight.position.x = 0; //(0, 0) are the coordinates where the mesh is spawned, and are the center of the plane
self.spotLight.position.z = 0;
self.spotLight.castShadow = true;

飞机是这样制作的：

//The plane.
self.plane = new THREE.Mesh(new THREE.PlaneGeometry(self.groundSize, self.groundSize), new THREE.MeshLambertMaterial({color: 0x5C8A00}));
self.plane.receiveShadow = true;
self.plane.position.x = 0;
self.plane.position.y = -26;
self.plane.position.z = 0;

另外，这是另一张图片，这一次，我添加了很多PointLights

​

​

你可以看到阴影是如何消失的！

现在，我在这里做错了什么？AFAIK，光线应该均匀地分散在各个方向上！而且，还有另一个问题，我似乎无法在场景中添加多个SpotLights！如果我这样做，一切都会完全变慢--这是故意的吗？也许是因为我在它们上面都启用了阴影。

@Neil，同样的事情也会发生在你的代码中！

​

​

Answer 1

我已经创建了一个jsfiddle，显示了一个使用Lambert材质的平面和一个投射阴影的旋转立方体，也许您可以看到与您的不同之处。

编辑

尝试使用一些参数，我可以使用以下命令停止演示中的剪辑：

spotLight.shadowCameraFov = 70;

更新demo和移动demo