CODEWITHSUNDEEP
three.jsshadow
user1243758
user1243758

Reputation:

How to update shadowMap size of light in THREE.js

I want to be able to update the size of the shadow map on a directional light in three.js.

When simply updating the the "shadowMapWidth" and "shadowMapHeight", nothing happens. When I update the "shadowMapSize" manually, the shadow sort of changes resolution but is not rendered properly since the shadowmap rendertarget is not set to the correct resolution. And finally, when I update the shadowmap rendertarget width and height, the shadow disappears completely (and or gets positioned incorrectly).

If anyone has any experience changing the shadowmap resolution of a shadow light in three.js I would love some help on getting this to work.

Upvotes: 3

Views: 4893

Answers (2)

Furkan
Furkan

Reputation: 1

This is the solution:

// initialize
this.light = new THREE.DirectionalLight(0xffffff, 2);
this.light.shadow.mapSize.width = 1024;
this.light.shadow.mapSize.height = 1024;
this.light.shadow.camera.near = 0.1;
this.light.shadow.camera.far = 5000;
this.light.shadow.bias = 0.00001;
this.light.shadow.autoUpdate = true;

// update
this.light.shadow.dispose();
this.light.shadow = null;
this.light.shadow = new DirectionalLightShadow();
this.light.shadow.mapSize.width = 1024*4;
this.light.shadow.mapSize.height = 1024*4;
this.light.shadow.camera.near = 0.1;
this.light.shadow.camera.far = 5000;
this.light.shadow.bias = 0.00001;
this.light.shadow.autoUpdate = true;

You need to import

three/src/lights/DirectionalLightShadow.js

Upvotes: 0

Walter Schwarz
Walter Schwarz

Reputation: 153

You have to dispose of the shadow map for it to update. Try this:

light.shadowMapWidth = 4096;
light.shadowMapHeight = 4096;
light.shadowMap.dispose();
light.shadowMap = null;

Upvotes: 2

Related Questions