javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
							<!DOCTYPE html>
<html lang="en">
  <head>
    <title>three.js webgl - ShadowMapViewer example </title>
    <meta charset="utf-8">
    <style>
      body {
        font-family: Monospace;
        background-color: #000;
        color: #fff;
        margin: 0px;
        overflow: hidden;
      }
      #info {
        position: absolute;
        top: 10px;
        width: 100%;
        text-align: center;
        z-index: 100;
        display:block;
      }
      #info a { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
    </style>
  </head>

  <body>

    <div id="info">
    <a href="http://threejs.org" target="_blank">three.js</a> - ShadowMapViewer example by <a href="https://github.com/arya-s">arya-s</a>
    </div>

    <script src="../build/three.min.js"></script>

    <script src="js/controls/OrbitControls.js"></script>

    <script src="js/shaders/UnpackDepthRGBAShader.js"></script>

    <script src="js/utils/ShadowMapViewer.js"></script>

    <script src="js/Detector.js"></script>
    
    <script src="js/libs/stats.min.js"></script>

    <script>

      if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

      var camera, scene, renderer, clock, stats;
      var dirLight, spotLight;
      var torusKnot, cube;
      var dirLightShadowMapViewer, spotLightShadowMapViewer;

      init();
      animate();


      function init() {
        
        initScene();
        initShadowMapViewers();
        initMisc();

        document.body.appendChild( renderer.domElement );
        window.addEventListener( 'resize', onWindowResize, false );

      }

      function initScene() {

        camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.01, 1000 );
        camera.position.set( 0, 15, 35 );

        scene = new THREE.Scene();

        // Lights
        var ambient = new THREE.AmbientLight( 0x404040 );
        scene.add( ambient );

        spotLight = new THREE.SpotLight( 0xffffff );
        spotLight.position.set( 10, 10, 5 );
        spotLight.castShadow = true;
        spotLight.shadowCameraNear = 8;
        spotLight.shadowCameraFar = 30;
        spotLight.shadowDarkness = 0.5;
        spotLight.shadowCameraVisible = true;
        spotLight.shadowMapWidth = 1024;
        spotLight.shadowMapHeight = 1024;
        spotLight.name = 'Spot Light';
        scene.add( spotLight );

        dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
        dirLight.position.set( 0, 10, 0 );
        dirLight.castShadow = true;
        dirLight.shadowCameraNear = 0.01;
        dirLight.shadowCameraFar = 10;
        dirLight.shadowCameraRight = 15;
        dirLight.shadowCameraLeft = -15;
        dirLight.shadowCameraTop  = 15;
        dirLight.shadowCameraBottom = -15;
        spotLight.shadowDarkness = 0.5;
        dirLight.shadowCameraVisible = true;
        dirLight.shadowMapWidth = 1024;
        dirLight.shadowMapHeight = 1024;
        dirLight.name = 'Dir. Light';
        scene.add( dirLight );


        // Geometry
        var geometry = new THREE.TorusKnotGeometry( 25, 8, 75, 20 );
        var material = new THREE.MeshPhongMaterial( {
          ambient: 0x404040,
          color: 0xff0000,
          shininess: 150, 
          specular: 0xffffff,
          shading: THREE.SmoothShading,
        } );

        torusKnot = new THREE.Mesh( geometry, material );
        torusKnot.scale.multiplyScalar( 1 / 18 );
        torusKnot.position.y = 3;
        torusKnot.castShadow = true;
        torusKnot.receiveShadow = true;
        scene.add( torusKnot );

        var geometry = new THREE.BoxGeometry( 3, 3, 3 );
        cube = new THREE.Mesh( geometry, material );
        cube.position.set( 10, 3, 10 );
        cube.castShadow = true;
        cube.receiveShadow = true;
        scene.add( cube );

        var geometry = new THREE.BoxGeometry( 10, 0.15, 10 );
        var material = new THREE.MeshPhongMaterial( {
          ambient: 0x404040,
          color: 0xa0adaf,
          shininess: 150, 
          specular: 0xffffff,
          shading: THREE.SmoothShading
        } );

        var ground = new THREE.Mesh( geometry, material );
        ground.scale.multiplyScalar( 3 );
        ground.castShadow = false;
        ground.receiveShadow = true;
        scene.add( ground );

      }

      function initShadowMapViewers() {

        dirLightShadowMapViewer = new THREE.ShadowMapViewer( dirLight );
        dirLightShadowMapViewer.position.x = 10;
        dirLightShadowMapViewer.position.y = 10;
        dirLightShadowMapViewer.size.width = 256;
        dirLightShadowMapViewer.size.height = 256;
        dirLightShadowMapViewer.update(); //Required when setting position or size directly

        spotLightShadowMapViewer = new THREE.ShadowMapViewer( spotLight );
        spotLightShadowMapViewer.size.set( 256, 256 );
        spotLightShadowMapViewer.position.set( 276, 10 );
        // spotLightShadowMapViewer.update();  //NOT required because .set updates automatically

      }

      function initMisc() {
        
        renderer = new THREE.WebGLRenderer( { antialias: true } );
        renderer.setSize( window.innerWidth, window.innerHeight );
        renderer.setClearColor( 0x000000, 1 );
        renderer.shadowMapEnabled = true;
        renderer.shadowMapType = THREE.BasicShadowMap;

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

        clock = new THREE.Clock();

        stats = new Stats();
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.right = '0px';
        stats.domElement.style.top = '0px';
        document.body.appendChild( stats.domElement );

      }

      function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

        dirLightShadowMapViewer.updateForWindowResize();
        spotLightShadowMapViewer.updateForWindowResize();

      }

      function animate() {

        requestAnimationFrame( animate );
        render();

        stats.update();

      }

      function renderScene() {

        renderer.render( scene, camera );

      }

      function renderShadowMapViewers() {

        dirLightShadowMapViewer.render( renderer );
        spotLightShadowMapViewer.render( renderer );

      }

      function render() {

        var delta = clock.getDelta();

        renderScene();
        renderShadowMapViewers();

        torusKnot.rotation.x += 0.5 * delta;
        torusKnot.rotation.y += 3 * delta;
        torusKnot.rotation.z += 2 * delta;

        cube.rotation.x += 0.5 * delta;
        cube.rotation.y += 3 * delta;
        cube.rotation.z += 2 * delta;

      }

    </script>

  </body>

</html>