sphere_shadow.js

var camera, scene, renderer;
var geometry, material, mesh;

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
  camera.position.z = 300;

  scene = new THREE.Scene();

  geometry = new THREE.SphereGeometry(50,32,16);
  material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: false } );

  var spotLight = new THREE.SpotLight( 0x8888FF );
  spotLight.position.set( 50, 50, 300 );
  spotLight.castShadow = true;
  spotLight.shadowDarkness = 0.5;
  spotLight.shadowCameraVisible = true;
  spotLight.shadowCameraNear = 0.01;
  scene.add( spotLight );

  mesh = new THREE.Mesh( geometry, material );
  mesh.castShadow = true;
  mesh.receiveShadow = false;
  mesh.position.z = 70;
  scene.add( mesh );

  var plane = new THREE.Mesh(new THREE.PlaneGeometry(500, 500), new THREE.MeshBasicMaterial({ color:0xffffff, wireframe: false }));
  plane.castShadow = false;
  plane.receiveShadow = true;
  scene.add(plane);

  var large = new THREE.CylinderGeometry(100, 100);
  var cylinder = new THREE.Mesh(large, new THREE.MeshNormalMaterial({ color: 0x000000, wireframe: true } ));
  cylinder.rotation.x = 90;
  cylinder.overdraw = true;
  scene.add(cylinder);

  renderer = new THREE.WebGLRenderer();
  renderer.shadowMapEnabled = true;
  renderer.setSize( window.innerWidth, window.innerHeight );

  document.body.appendChild( renderer.domElement );

}

function animate() {

  // note: three.js includes requestAnimationFrame shim
  requestAnimationFrame( animate );

  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.02;

  renderer.render( scene, camera );

}