The shadow of the object falling on the plane is only within the small square. When I try to move the object, the object’s shadow also moves but only appears in a small square like in the picture. Here is my code, it seems directional light is not working. The light is like ambient light, not directional light.
const dl = new THREE.DirectionalLight(0xffffff, 0.5);
dl.position.set(0, 60, 2);
dl.castShadow = true;
const dlHelper = new THREE.DirectionalLightHelper(dl, 20);
const dlSettings = {
visible: true,
color: dl.color.getHex(),
};
const dlFolder = gui.addFolder('directional light');
dlFolder.add(dlSettings, 'visible').onChange((value) => {
dl.visible = value;
dlHelper.visible = value;
});
dlFolder.add(dl, 'intensity', 0, 1, 0.25);
dlFolder.add(dl.position, 'y', 1, 100, 5);
dlFolder.add(dl, 'castShadow');
dlFolder
.addColor(dlSettings, 'color')
.onChange((value) => dl.color.set(value));
dlFolder.open();
dl.shadow.mapSize.width = 2048;
dl.shadow.mapSize.height = 2048;
LightSwitch = true;
scene.add(dl);
scene.add(dlHelper);
break;
This is what I wanted to do, but my code was broken somewhere. Please help me, thank you very much. T~T
Three-csm might be what you’re looking for - it’s a camera-following directional light 
1 Like
I add code like this:
dl.shadow.mapSize.width = 2048;
dl.shadow.mapSize.height = 2048;
dl.shadow.camera.left = -200;
dl.shadow.camera.right = 200;
dl.shadow.camera.top = 200;
dl.shadow.camera.bottom = -200;
dl.shadow.camera.near = 0.5;
dl.shadow.camera.far = 500;
And here is the result, but the directional light does not glow.
What do you mean by glow?
You can increase the intensity of the light (by default in most recent versions of three it’s best you use intensity set to 3 or to Math.PI) to make it brighter, but the fact that you can see the object in your scene indicates that the light is working fine 
Oh, I see.
Can I ask you another problem?
I try to use point light, this is my code:
light = new THREE.PointLight(0xffffff, 10, Infinity,1);
light.position.set(0, 60, 0);
helper = new THREE.PointLightHelper(light, 3);
light.castShadow = shadow;
LightSwitch = true;
const plSettings = {
visible: true,
color: light.color.getHex(),
};
plFolder = gui.addFolder('Point light');
plFolder.add(plSettings, 'visible').onChange((value) => {
light.visible = value;
helper.visible = value;
});
plFolder.add(light, 'intensity', 0, 2, 0.25);
plFolder.add(light.position, 'x', -300, 300,10);
plFolder.add(light.position, 'y', -10, 100,10);
plFolder.add(light.position, 'z', -300, 300,10);
plFolder.add(light, 'castShadow');
plFolder
.addColor(plSettings, 'color')
.onChange((value) => light.color.set(value));
plFolder.open();
scene.add(light);
scene.add(helper);
break;
The problem is the plane does not receive the shadow, it looks like this:
Thank you so much ~~~
It happens with the spotlight too.
Are you defining the objects so that they cast and receive shadows?
Also, if you are using an ambient light, that can overpower the pointlight/spotlight.
ADDITION:
Since you deleted the last post, you may have solved your problem.
Here are a few more things that can cause problems (each of which I have run into personally):
- If you are getting a moire pattern, you need to adjust the shadowBias.
- Not putting the light far enough away from the object will prevent shadows from appearing.
- MeshBasicMaterial is not affected by light, therefore doesn’t accept shadows.
1 Like
