CODEWITHSUNDEEP
three.js
edA-qa mort-ora-y
edA-qa mort-ora-y

Reputation: 31921

How to alter the intensity of a shadow cast by a three.js object?

How can I alter the intensity of a shadow cast by an object in the three.js? Currently translucent materials cast a shadow as intense as opaque objects. Obviously I'd like the translucent ones to not cast such an intense shadow.

Upvotes: 6

Views: 4146

Answers (2)

Eric Worrall
Eric Worrall

Reputation: 31

Create two point lights in the same location, one casts a shadow, the other doesn't. By making the shadow light dim, you can create a soft shadow.

Note in the example below, both lights are in position -100,200,200. The total intensity of the light from this location is 0.9, but the light which casts a shadow is only 0.2.

var shadowLight = new THREE.PointLight(0xffffff, 0.2);
shadowLight.position.set(-100,200,100);
shadowLight.castShadow = true;
shadowLight.shadow.mapSize.width = 2048;
shadowLight.shadow.mapSize.height = 2048;
scene.add(shadowLight);

var light = new THREE.PointLight(0xfffff3, 0.7);
light.position.set(-100,200,100);
scene.add(light);

Upvotes: 1

WestLangley
WestLangley

Reputation: 104823

When casting shadows in three.js using WebGLRenderer, objects are treated as solid and non-translucent from the point of view of the light.

You can control the shadow intensity on a per-light basis by setting light.shadowDarkness to a value in the range [ 0, 1 ].

three.js r.64

EDIT: light.shadowDarkness is no longer supported as of three.js r.74. You can add ambient light to your scene to compensate.

three.js r.75

Upvotes: 5

Related Questions