three.js - Three JS - 影を落とす

Question

ボールからの影を床に表示しようとしていますが、うまくいかないようです。レンダラー、カメラ、ライト、およびオブジェクトを宣言するコードは次のとおりです。

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;

誰かが私に何が欠けているか教えてくれますか? ありがとう