Weird SpotLight

No clue what is going on

by Dafher

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>

 <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body{
  margin: 0;
}
canvas{
  width: 100%;
  height: 100%;
}

JavaScript

var scene;
var camera;
var renderer;
var container;
var board;
var SpotLightHelper;
var cameraHelper;
const sceneWidth = window.innerWidth;
const sceneHeigth = window.innerHeight;

init();
 
function init(){
    createScene();
    update();
}
function createScene(){
    scene = new THREE.Scene();
    scene.backgroud = new THREE.Color(0xff00ff);
    
    camera = new THREE.PerspectiveCamera(75, sceneWidth / sceneHeigth,0.1,1000); 
    camera.position.set(0,0,11);
    

    renderer = new THREE.WebGLRenderer({ antialias: true});
    renderer.setSize(sceneWidth, sceneHeigth);
    renderer.shadowMap.enable = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
       
    document.body.appendChild(renderer.domElement);
    
    orbitControl = new THREE.OrbitControls(camera, renderer.domElement);
    orbitControl.addEventListener('change',render);
    orbitControl.enableZoom = true;
    
    
    var ambienLight = new THREE.AmbientLight(0xffffff);
    scene.add(ambienLight);
    var SpotLight = new THREE.SpotLight(0xffffff,1);

    SpotLight.position.set(0,15,35);
    SpotLight.angle = Math.PI/8;
    SpotLight.distance = 15;
    SpotLight.penumbra = 0.05;
    SpotLight.distance = 50;
    SpotLight.decay = 0;

    SpotLight.castShadow = true;
    //SpotLight.shadow.update(SpotLight);
    SpotLight.shadow.mapSize.width = 1024;
    SpotLight.shadow.mapSize.height = 1024;
    SpotLight.shadow.camera.near = 0.5;
    SpotLight.shadow.camera.far = 50;   
    scene.add(SpotLight);   
   
    SpotLightHelper  = new THREE.SpotLightHelper(SpotLight);
    scene.add(SpotLightHelper);
    cameraHelper = new THREE.CameraHelper(SpotLight.shadow.camera);
    scene.add(cameraHelper)

    board = createBoard(0,0,0);


    var Plane = new THREE.PlaneGeometry(50,50,50);
    var PlaneMaterial = new THREE.MeshPhongMaterial({color:0x22222222, side: THREE.DoubleSide});
    var PlaneMesh = new THREE.Mesh(Plane,PlaneMaterial);
    PlaneMesh.position.z = -5;
    PlaneMesh.receiveShadow =...