incomplete shadow with THREE.js
<p>I am a beginner with javascript and THREE.js and I need help.</p>

<p>You can see below what I obtained
<a href="https://i.stack.imgur.com/P1hWA.png" rel="nofollow"><img src="https://i.stack.imgur.com/P1hWA.png" alt="this what I obtained"></a></p>

<p>and this is the code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// on initialise le moteur de rendu
    renderer = new THREE.WebGLRenderer();

    renderer.setSize( window.innerWidth, window.innerHeight );
    document.getElementById('container').appendChild(renderer.domElement);
    
    // on initialise la scène
    scene = new THREE.Scene();
    
    // on initialise la camera que l’on place ensuite sur la scène
    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 100000 );
    camera.position.set(0, 0, 1000);
    scene.add(camera);
    
    // plane
 me = new THREE.Mesh(new THREE.PlaneGeometry(900,550), new THREE.MeshPhongMaterial({color: 0xffffff}));
 scene.add( me );
    
    me.position.x = 130;
    me.position.y = 10;
    me.rotation.y = -20;
    
    // on créé un  cube au quel on définie un matériau puis on l’ajoute à la scène 
    cube = new THREE.Mesh( new THREE.CubeGeometry( 100, 100, 100 ), new THREE.MeshPhongMaterial({color:0x00ffff}) );
    scene.add( cube );
    
    cube.position.y = 0;
    cube.position.x = 20;
    cube.position.z = 0;
    cube.rotation.y = 0;
    
    scene.add( new THREE.AmbientLight( 0x212223) );
      
    light = new THREE.SpotLight(0xffffff, 1);
    light.position.set(-300,-100,20); 
    light.angle = Math.PI/5;
    light.shadowCameraVisible = true;
    scene.add(light);
    
    renderer.shadowMap.enabled = true;
    renderer.shadowMapDarkness = 1;
    
     light.castShadow = true;
     light.intensity = 0.8;
     cube.castShadow = true;
     cube.receiveShadow = true;
     me.receiveShadow = true;
    
     lightHelper = new THREE.SpotLightHelper( light );
    scene.add(lightHelper);
    
    renderer.render( scene, camera );</code></pre>
</div>
</div>
</p>

<p>the rest of my code change the x and y value of the light or of the cube and the shadow of the cube is not always complete and I don't understand why... 
Like I am am beginner I think I have do a mistake in my code.</p>