Three JS - Casting Shadows

Question

I am trying to get the shadow from the ball appear on the floor, but it doesn't seem to work. Here is my code that declares the renderer, camera, lights, and objects:

var renderer = new THREE.WebGLRenderer({antialias: true}); 
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.shadowMapEnabled = true;
  renderer.shadowMapType = THREE.PCFSoftShadowMap;
  document.body.appendChild( renderer.domElement ); 

  var planegeo = new THREE.PlaneGeometry(100,100);
  var geomaterial = new THREE.MeshLambertMaterial({color: "#EA8E12", side: THREE.DoubleSide});
  var plane = new THREE.Mesh(planegeo, geomaterial);
  plane.rotation.x += 90;
  plane.position.z = -2;
  scene.add(plane);

  var light = new THREE.AmbientLight( "#EA8E12", 101);
  var light2 = new THREE.DirectionalLight("yellow", 100);
  light.position.set(0, 100, 0);
  light2.position.set(0, 100, 0);
  scene.add(light);
  scene.add(light2);


  var sphereParent = new THREE.Object3D();
  var geometry = new THREE.SphereGeometry(1, 100, 100);
  var material = new THREE.MeshPhongMaterial( {color: "yellow", shininess: 100});
  var circle = new THREE.Mesh(geometry, material);
  sphereParent.add(circle);
  sphereParent.position.set(0,3,0);
  scene.add(sphereParent);



  light2.castShadow = true;
  circle.castShadow = true;
  sphereParent.castShadow = true;
  plane.receiveShadow = true;

Does anyone can tell me what I am missing? Thanks

Answer 1

This should get you started. Modify the parameters as needed:

light2.castShadow = true;
light2.shadowMapWidth = 1024;
light2.shadowMapHeight = 1024;
light2.shadowMapDarkness = 0.75;
light2.shadowCameraNear = 1;
light2.shadowCameraFar = 1000;
light2.shadowDarkness = 0.75;

/* since you have a directional light */
light2.shadowCameraLeft = -500;
light2.shadowCameraRight = 500;
light2.shadowCameraTop = 500;
light2.shadowCameraBottom = -500;

light2.shadowCameraVisible = true;    /* debugging */

on the renderer side this might help:

renderer.shadowMapDebug = true;