Shadow not appearing on plane from cube object

Questions
, ,
1

Hi,

I am new to three.js and have created a basic scene with a cube mesh object and a plane sitting just below it. I have an ambient light and directional light which points exactly where I want it to in the scene but it is not creating a shadow on the plane behind the cube mesh object.

Capture

As you can see from this image, the light source should create a shadow behind the cube but for some reason my code is not working. I have tried altering and removing code to configure the shadows but not getting anywhere.

Please could someone tell me what im doing wrong?! Thanks so much

Here’s the code…

			scene.background = new THREE.Color( 0xF0F0F0 );
			
           
            
            // Cube
			var geometry = new THREE.BoxBufferGeometry( 160, 440, 320 );
			
			
            
            var textureLoader = new THREE.TextureLoader();

            var texture0 = textureLoader.load( '' );
            var texture2 = textureLoader.load( '' );
            var texture3 = textureLoader.load( '' );
            var texture4 = textureLoader.load( '' );

            var materials = [
                new THREE.MeshPhongMaterial( { map: texture0 } ),
                new THREE.MeshPhongMaterial( { map: texturex1 } ),
                new THREE.MeshPhongMaterial( { map: texture2 } ),
                new THREE.MeshPhongMaterial( { map: texture3 } ),
                new THREE.MeshPhongMaterial( { map: texture4 } ),
                new THREE.MeshPhongMaterial( { map: texturex2 } )
            ];
            
            var faceMaterial = new THREE.MeshFaceMaterial( materials );
            
            cube = new THREE.Mesh( geometry, faceMaterial );
			cube.position.y = 0;
            cube.rotation.y = Math.PI / 1.5;
            cube.castShadow = true; //default is false
            cube.receiveShadow = false; //default
			scene.add( cube );
            
            var planegeo = new THREE.PlaneGeometry( 5000, 3000 );
            var material = new THREE.MeshPhongMaterial( {color: 0xffffff, side: THREE.DoubleSide} );
            plane = new THREE.Mesh(planegeo, material);
            plane.rotation.x = Math.PI / 2;
            plane.position.y = -400;
            plane.receiveShadow = true;
            scene.add(plane);
            
             var light = new THREE.AmbientLight( 0xffffff, 1 ); // soft white light
            scene.add( light );
            
            var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5, 5000 );
            directionalLight.target = cube;
            directionalLight.castShadow = true;
            directionalLight.position.z = 300;
            directionalLight.position.x = 500;
            scene.add( directionalLight );
            
          
            
            renderer = new THREE.WebGLRenderer({antialias: true});
            renderer.shadowMap.enabled = true;
            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
            renderer.shadowMap.needsUpdate = true;
			renderer.setPixelRatio( window.devicePixelRatio );
			renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer.domElement );
			
			//
			window.addEventListener( 'resize', onWindowResize, false );