three.jsshadows

Three JS - Casting Shadows


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


Solution

  • 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;