shadows

Demonstrates how to turn on shadow mapping with a simple WASD-steerable car. Note that shadows will work only with directional lights or spotlights. Note also that if you are building your scene in Blender, you can specify for each object whether it casts and/or receives shadows.

1-2-three
example 37: shadows

<!DOCTYPE html>
<html>
<head>
<title>example 37: shadows</title>
<script type="text/javascript" src="js/three/three.js"></script>
<script type="text/javascript" src="js/three/examples/js/controls/OrbitControls.js"></script>
<script type="text/javascript">

function fixMatrix(mesh) {
  bakeRotation(mesh);
  rotate180(mesh);
  bakeRotation(mesh);
}

function rotate180(mesh) {
  var m = new THREE.Matrix4();
  m.makeRotationY(Math.PI);
  mesh.matrix.multiplyMatrices(mesh.matrix,m);
  mesh.matrix.decompose( mesh.position, mesh.quaternion, mesh.scale );
}

function bakeRotation(mesh) {
  mesh.updateMatrixWorld();
  var geom = mesh.geometry;
  var rotMatrix = mesh.matrix.clone();
  rotMatrix.setPosition( new THREE.Vector3(0,0,0) );
  var pos = new THREE.Vector3();
  pos.setFromMatrixPosition(mesh.matrix);
  geom.applyMatrix(rotMatrix);
  mesh.matrix.identity();
  mesh.matrix.setPosition(pos);
  mesh.matrix.decompose( mesh.position, mesh.quaternion, mesh.scale );
  mesh.updateMatrixWorld();
}

var init = function() {
  var canv = document.getElementsByTagName("canvas")[0];
  var w = canv.clientWidth;
  var h = canv.clientHeight;

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(
      15,     // Field of view
      w / h,  // Aspect ratio
      0.1,    // Near
      10000   // Far
  );
  camera.position.set( -2, 2, 25 );
  
  var control = new THREE.OrbitControls(camera,canv);
  
  renderer = new THREE.WebGLRenderer({canvas:canv});
  renderer.setSize( w, h );
  renderer.setClearColor( new THREE.Color(0xeeeeee), 1 );
  
  // Prep renderer for shadows
  renderer.shadowMap.enabled = true;
  // THREE.BasicShadowMap, THREE.PCFShadowMap, THREE.PCFSoftShadowMap
  renderer.shadowMap.type = THREE.PCFShadowMap;
  
  var light = new THREE.DirectionalLight( 0xffffff );
  // Add shadow properties to light
  light.castShadow = true;
  light.shadow.mapSize.width = 2048;
  light.shadow.mapSize.height = 2048;
  light.shadow.camera.near = 5;
  light.shadow.camera.far = 100;
  //light.shadowBias = 0.00001;
  // If this is too low, expect bright lines around objects
  light.shadow.bias = 0.0015;
  // This rectangle is the only place you will get shadows
  light.shadow.camera.right =  20;
  light.shadow.camera.left = -20;
  light.shadow.camera.top =  20;
  light.shadow.camera.bottom = -20;
  // For debugging
  //var helper = new THREE.CameraHelper( light.shadow.camera );
  //scene.add(helper);
  
  light.position.set( -30, 30, 0 );
  scene.add( light );
  
  var ambient = new THREE.AmbientLight( 0x777777 );
  scene.add( ambient );
  
  var mesh;
  var loader = new THREE.ObjectLoader(  );
  var onScene = function(scn) {
    mesh = scn.getObjectByName("Bug");
    mesh.material.shininess = 5;
    fixMatrix(mesh);
    scene.add(mesh);
    requestAnimationFrame( animate );
  };
  loader.load("models/vwbug/vwbug-scene.json", onScene);

window.onload = init;
</script>
</head>
<body><canvas style="width:100%;height:95%;border:1px gray solid;"></body>
</html>

shadows

1-2-threeexample 37: shadows

1-2-three
example 37: shadows