I am doing something wrong with SpotLights and shadows in Three.js

I have a really simple scene in which there is one .dae grid and a 7000 * 7000 plane below the grid. I would like it to be lit high SpotLight, so the grid casts a shadow on the ground. But something seems broken! No matter how high I put it SpotLight, it never tans a plane! In addition, it illuminates the grid only a little while it is on a small square (around the perimeter).

Here you can see the situation: Screenshot1, almost everything is dark

As soon as I move the mesh (monster) around, it will no longer burn.

This is how I create light:

// 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;

This is how the plane works:

//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;

Also, here is a different picture, this time I added a lot PointLights:

Screenshot2, everything is lit up.

You can see the shadow still fade!

, ? AFAIK, ! , , , , SpotLights ! , - ? , , ...

@Neil, !

enter image description here

0
1

jsfiddle, , , , , .

, :

spotLight.shadowCameraFov = 70;

+3
source

All Articles