shadowmap

spotlight & direction light simple (including self-shadow)

by yi hom

HTML

<div id="info">Lights AND Shadow
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/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, lamp, light, controls;
var mesh2, angle = 0;

init();
animate();

function init() {

  scene = new THREE.Scene();

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

  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);
  ///////////////////////////////////////////////////////////
  mesh2 = new THREE.Mesh(new THREE.TorusKnotGeometry(20, 6, 100, 16),
    new THREE.MeshLambertMaterial());
  scene.add(mesh2);
  // floor
  var shaderMaterial = new THREE.ShaderMaterial ({   
   /*     side: THREE.DoubleSide,
        uniforms: {
            lightPos: {
                type: 'v3',
                value: new THREE.Vector3(50,-30, 110)
            }
        },  */
  uniforms: THREE.UniformsUtils.merge([
     THREE.UniformsLib['shadowmap'],
    ]),
    
  	vertexShader: [
    THREE.ShaderChunk[ "shadowmap_pars_vertex" ],
    "uniform vec3 lightPos;",
    //"varying vec4 wPos;",
	"varying vec4 worldPosition;",
    "varying float diffuse;",
    "void main() {",
        "vec4 eyepos = modelViewMatrix * vec4(position, 1.0);",
        "vec4 eyeLightPos = viewMatrix * vec4(lightPos, 1.0);",
        "vec3 ll = normalize(eyeLightPos.xyz - eyepos.xyz);",
        "vec3 eyenorm = normalize(normalMatrix * normal);",
        "diffuse = abs(dot(eyenorm, ll));",
       // "wPos = modelMatrix * vec4(position, 1.0);",
		"worldPosition = modelMatrix * vec4(position, 1.0);",
        "gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);",
    THREE.ShaderChunk[ "shadowmap_vertex" ],
    "}",
    ].join('\n'),    
    fragmentShader: [
      THREE.ShaderChunk[ "shadowmap_pars_fragment" ],
    "vec3 mod289(vec3 x) {",
        "return x - floor(x * (1.0 / 289.0))...