Three JS - Casting Shadows - three.js

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;