master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_shadowmap_vsm.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - VSM Shadows example </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link type="text/css" rel="stylesheet" href="main.css">
  </head>
  <body>
    <div id="info">
    <a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</a> - VSM Shadows example by <a href="https://github.com/supereggbert">Paul Brunt</a>
    </div>

    <script type="module">

      import * as v3d from '../build/v3d.module.js';

      import Stats from './jsm/libs/stats.module.js';
      import { GUI } from './jsm/libs/dat.gui.module.js';

      import { OrbitControls } from './jsm/controls/OrbitControls.js';

      let camera, scene, renderer, clock, stats;
      let dirLight, spotLight;
      let torusKnot, dirGroup;

      init();
      animate();

      function init() {

        initScene();
        initMisc();

        // Init gui
        const gui = new GUI();

        const config = {
          'Spotlight Radius': 4,
          'Directional light Radius': 4,
        };

        gui.add(config, 'Spotlight Radius').min(2).max(8).onChange(function(value) {

          spotLight.shadow.radius = value;

        });

        gui.add(config, 'Directional light Radius').min(2).max(8).onChange(function(value) {

          dirLight.shadow.radius = value;

        });

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

      }

      function initScene() {

        camera = new v3d.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.set(0, 10, 30);

        scene = new v3d.Scene();
        scene.fog = new v3d.Fog(0xCCCCCC, 50, 100);

        // Lights

        scene.add(new v3d.AmbientLight(0x444444));

        spotLight = new v3d.SpotLight(0x888888);
        spotLight.name = 'Spot Light';
        spotLight.angle = Math.PI / 5;
        spotLight.penumbra = 0.3;
        spotLight.position.set(8, 10, 5);
        spotLight.castShadow = true;
        spotLight.shadow.camera.near = 8;
        spotLight.shadow.camera.far = 200;
        spotLight.shadow.mapSize.width = 256;
        spotLight.shadow.mapSize.height = 256;
        spotLight.shadow.bias = - 0.002;
        spotLight.shadow.radius = 4;
        scene.add(spotLight);


        dirLight = new v3d.DirectionalLight(0xFFFFFF, 1);
        dirLight.name = 'Dir. Light';
        dirLight.position.set(3, 12, 17);
        dirLight.castShadow = true;
        dirLight.shadow.camera.near = 0.1;
        dirLight.shadow.camera.far = 500;
        dirLight.shadow.camera.right = 17;
        dirLight.shadow.camera.left = - 17;
        dirLight.shadow.camera.top  = 17;
        dirLight.shadow.camera.bottom = - 17;
        dirLight.shadow.mapSize.width = 512;
        dirLight.shadow.mapSize.height = 512;
        dirLight.shadow.radius = 4;
        dirLight.shadow.bias = - 0.0005;
        scene.add(dirLight);

        dirGroup = new v3d.Group();
        dirGroup.add(dirLight);
        scene.add(dirGroup);

        // Geometry

        const geometry = new v3d.TorusKnotBufferGeometry(25, 8, 75, 20);
        const material = new v3d.MeshPhongMaterial({
          color: 0x999999,
          shininess: 0,
          specular: 0x222222
        });

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

        const cylinderGeometry = new v3d.CylinderBufferGeometry(0.75, 0.75, 7, 32);

        const pillar1 = new v3d.Mesh(cylinderGeometry, material);
        pillar1.position.set(10, 3.5, 10);
        pillar1.castShadow = true;
        pillar1.receiveShadow = true;

        const pillar2 = pillar1.clone();
        pillar2.position.set(10, 3.5, - 10);
        const pillar3 = pillar1.clone();
        pillar3.position.set(- 10, 3.5, 10);
        const pillar4 = pillar1.clone();
        pillar4.position.set(- 10, 3.5, - 10);

        scene.add(pillar1);
        scene.add(pillar2);
        scene.add(pillar3);
        scene.add(pillar4);

        const planeGeometry = new v3d.PlaneBufferGeometry(200, 200);
        const planeMaterial = new v3d.MeshPhongMaterial({
          color: 0x999999,
          shininess: 0,
          specular: 0x111111
        });

        const ground = new v3d.Mesh(planeGeometry, planeMaterial);
        ground.rotation.x = - Math.PI / 2;
        ground.scale.multiplyScalar(3);
        ground.castShadow = true;
        ground.receiveShadow = true;
        scene.add(ground);

      }

      function initMisc() {

        renderer = new v3d.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = v3d.VSMShadowMap;

        renderer.setClearColor(0xCCCCCC, 1);

        // Mouse control
        const controls = new OrbitControls(camera, renderer.domElement);
        controls.target.set(0, 2, 0);
        controls.update();

        clock = new v3d.Clock();

        stats = new Stats();
        document.body.appendChild(stats.dom);

      }

      function onWindowResize() {

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

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

      }

      function animate() {

        requestAnimationFrame(animate);
        render();

        stats.update();

      }

      function renderScene() {

        renderer.render(scene, camera);

      }

      function render() {

        const delta = clock.getDelta();
        const time = clock.elapsedTime;

        renderScene();

        torusKnot.rotation.x += 0.25 * delta;
        torusKnot.rotation.y += 2 * delta;
        torusKnot.rotation.z += 1 * delta;

        dirGroup.rotation.y += 0.7 * delta;
        dirLight.position.z = 17 + Math.sin(time * 0.001) * 5;

      }

    </script>
  </body>
</html>