Shadow Test 2 Fixed

by michaelnicol

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>

  <body>

    <script type="importmap">
      {
          "imports": {
            "three": "https://unpkg.com/[email protected]/build/three.module.js"
          }
        }
      </script>

    <script type="module">
      // If all fails go to 113
        import { OrbitControls } from "https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js"

        import * as three from "https://unpkg.com/[email protected]/build/three.module.js"
        /* Scene set up */
        var scene = new three.Scene();
        var camera = new three.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        var renderer = new three.WebGLRenderer();
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = three.PCFSoftShadowMap;
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        camera.position.y = 20
        camera.position.x = 20
        camera.position.z = 20
        const controls = new OrbitControls(camera, renderer.domElement);
        
        
        let light = new three.SpotLight()
        light.castShadow = true
        light.shadow.mapSize.width = 2056;
        light.shadow.mapSize.height = 2056;
        light.shadow.camera.near = 0.5;
        light.shadow.camera.far = 1000;
        light.shadow.bias = -0.00001;
        light.shadow.penumbra = 0.5
        light.shadow.focus = 1;
        light.shadow.camera.updateProjectionMatrix();
        light.position.set(11,11,11)
        const spotLightHelper = new three.SpotLightHelper( light );
        scene.add( spotLightHelper );
        const helper = new three.CameraHelper( light.shadow.camera );
        scene.add( helper );
        scene.add(light)
       ...