CODEWITHSUNDEEP
javascriptthree.js
Gregor Menih
Gregor Menih

Reputation: 5116

ThreeJS won't cast any shadows

I'm having some trouble with ThreeJS. I've got some cubes, that should be casting shadows on a plane below, but they don't - I've been Googling a solution for a few hours now and tried everything I could find, but I can't get it to work.

I use MeshPhongMaterial on all objects, and I've added .castShadow and .receiveShadow to all appropriate objects. I use a SpotLight, directed at the ground - it lights the cubes, and the ground, but the cubes don't cast a shadow. Here's an example of a cube and ground:

  var cubeGeometry = new THREE.CubeGeometry(20, 20, 20);
  cube1 = new THREE.Mesh(cubeGeometry, material);
  cube1.shading = THREE.FlatShading;
  cube1.castShadow = true;
  cube1.receiveShadow = true;
  var groundGeometry = new THREE.PlaneGeometry(200, 200);
  var groundMaterial = new THREE.MeshPhongMaterial({color: 0xf0dc3f});
  ground = new THREE.Mesh(groundGeometry, groundMaterial);
  ground.shading = THREE.FlatShading;
  ground.position.y = -30;
  ground.rotation.x = Math.PI / 2;
  ground.rotation.z = Math.PI / 4;
  ground.receiveShadow = true;

And my JsFiddle: https://jsfiddle.net/fggjp2n9/

Upvotes: 1

Views: 1011

Answers (1)

Falk Thiele
Falk Thiele

Reputation: 4494

You are missing:

renderer.shadowMap.enabled = true;

https://jsfiddle.net/fggjp2n9/1/

Upvotes: 3

Related Questions