CODEWITHSUNDEEP
javascriptthree.js
Neil
Neil

Reputation: 8121

How to get a shadow using SpriteMaterial and a DirectionalLight

My code :

Directional light :

light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(-50, 50, 300);
light.castShadow = true;
light.shadowDarkness = 0.4;
light.shadowMapWidth = 1024;
light.shadowMapHeight = 1024;
scene.add(light);

Sprite :

var spriteMaterial = new THREE.SpriteMaterial({map: texture});
var info = new THREE.Sprite( spriteMaterial );
info.castShadow = true;
info.scale.set(infoScale, infoScale, infoScale);
info.name = continent.label;
info.userData.continent = continent;
info.userData.id = continent.id;
info.userData.type = 'info';
hubInfos.push(info);

Here is the result my aircraft has a shadow but not the spriteenter image description here

Upvotes: 1

Views: 172

Answers (1)

WestLangley
WestLangley

Reputation: 104823

Sprites in three.js do not cast shadows.

One work-around is to use PlaneGeometry like so:

scene.add( plane );
plane.lookAt( camera );

Note: LookAt() will not work correctly if the plane is a child of a rotating object; it must be a child of the scene.

three.js r.74

Upvotes: 1

Related Questions