shadowmap

spot light

by Bai Shiuan Huang

HTML

<div id="info">SpotLight AND Shadows
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">
</script>

CSS

#info {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}

body {
  // margin: 0;
  overflow: hidden;
}

JavaScript

var camera, scene, renderer, light1, controls;

init();
animate();

function init() {

  scene = new THREE.Scene();

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

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x333333);

  controls = new THREE.OrbitControls(camera, renderer.domElement);

  document.body.appendChild(renderer.domElement);
  ///////////////////////////////////////////////////////////

  // floor
  var floor = new THREE.Mesh(new THREE.PlaneGeometry(400, 400, 10, 10),
    new THREE.MeshPhongMaterial());
  floor.rotation.x = -Math.PI / 2;
  scene.add(floor);

  var table = new THREE.Mesh(new THREE.BoxGeometry(100, 5, 100),
    new THREE.MeshPhongMaterial());
  //table.rotation.x = -Math.PI / 2;
  table.position.set (30, 50, 0);//y = 50;
  scene.add(table);

	var cube = new THREE.Mesh(new THREE.BoxGeometry(10, 10, 10), new 	THREE.MeshLambertMaterial());
  cube.position.set(0, 90, 0);
  scene.add (cube)

  ///////////////////////////////////////////////////////////

  // spotlight
  light1 = new THREE.SpotLight(0xffffff, 1);
  light1.position.set(-100, 175, 0);//100);
  light1.angle = Math.PI / 4;
  light1.target = cube;
  light1.penumbra = 0.6;
  light1.distance = 1000;
  scene.add(light1);

  // shadow map settings
  light1.castShadow = true;
  light1.shadow.mapSize.width = 1024;
  light1.shadow.mapSize.height = 1024;
  light1.shadow.camera.near = 50;
	light1.shadow.camera.far = 4000;	
	light1.shadow.camera.fov = 45;

 	//scene.add(new THREE.SpotLightHelper(light1, 5));

  light2 = new THREE.SpotLight(0xffffff, 1);
  light2.position.set(200, 350, 0);//100);
  light2.angle = Math.PI / 4;
  light2.target = table;//cube;
  light2.penumbra = 0.6;
  light2.distance = 1000;
  scene.add(light2);

  // shadow map settings
  light2.castShadow = true;
  light2.shadow.mapSize.width = 1024;
 ...