Тени Three.js .obj не работают

Я пытаюсь изучить Thee.js. И это довольно прямолинейно. Однако по какой-то причине я не могу заставить работать тени. Я установил для castShadows, recieveShadows, shadowMapEnabled значение true в тех местах, где я нашел, где их установить, однако они не показывают тени (нигде).

Что я хочу сделать, так это то, что моя импортированная модель отбрасывает тени на себя, чтобы вы могли на самом деле понять, что это за модель.

Это мой текущий код:

var container;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;

init();
animate();

function init(){
    container = document.createElement( "div" );
    document.body.appendChild( container );

    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
    camera.position.z = 100;

    controls = new THREE.TrackballControls( camera );
    controls.rotateSpeed = 5.0;
    controls.zoomSpeed = 5;
    controls.panSpeed = 0;
    controls.noZoom = false;
    controls.noPan = true;
    controls.staticMoving = true;
    controls.dynamicDampingFactor = 0.3;

    scene = new THREE.Scene();

    var ambient = new THREE.AmbientLight( 0xffffff );
    scene.add( ambient );

    /*var spotLight = new THREE.SpotLight( 0xffffff,1.5, 40 );
    spotLight.position.set( -400, 1200, 300 );
    spotLight.castShadow = true;
    spotLight.shadowDarkness = 0.5;
    spotLight.shadowCameraVisible = true;
    spotLight.target.position = new THREE.Object3D( 10, 10, 10 );
    scene.add( spotLight );*/

    var light = new THREE.DirectionalLight(0xffffff, 2);
    light.position.x = -100;
    light.position.y = 150;
    light.shadowCameraVisible = true;
    light.castShadow = true;

    light.shadowCameraNear = 100; 
    light.shadowCameraFar = 300;
    light.shadowCameraFov = 20;
    light.shadowBias = -0.00022;   
    light.shadowDarkness = 0.5;
    scene.add(light);

    var groundGeo = new THREE.PlaneGeometry(400,400);
    var groundMat = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

    var ground = new THREE.Mesh(groundGeo,groundMat);
    ground.position.y = -20; 
    ground.rotation.x = -Math.PI/2; 
    ground.doubleSided = true; 
    ground.reciveShadow = true;
    scene.add(ground); 


    var manager = new THREE.LoadingManager();
    manager.onProgress = function( item, loaded, total ){
        console.log( item, loaded, total );
    };

    var loader = new THREE.OBJLoader( manager );

    //var texture = new THREE.Texture();

    var texture = THREE.ImageUtils.loadTexture( "textures/red.jpg" );
    texture.repeat.set( 0.7, 1 );
    texture.wrapS   = texture.wrapT = THREE.RepeatWrapping;
    var material    = new THREE.MeshPhongMaterial({
        ambient     : 0x444444,
        color       : 0x8844AA,
        shininess   : 300, 
        specular    : 0x33AA33,
        shading     : THREE.SmoothShading,
        map     : texture
    });

    loader.load("models/Shooza.obj",function(e){
        var object = e;

        object.traverse( function(child){
            if(child instanceof THREE.Mesh){
                child.material.color.setRGB(0.5,0,0);
                child.castShadow = true;
                child.reciveShadow = false;
                //child.material.map = texture;
            }
        });

        //object.scale = new THREE.Vector3(-100,-100,-100);
        object.scale.set(0.2,0.2,0.2);

        object.position.y -= 2.5;

        object.castShadow = true;
        object.reciveShadow = true;

        scene.add(object);
    });


    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth,window.innerHeight);
    renderer.shadowMapEnabled = true;
    renderer.shadowMapType      = THREE.PCFSoftShadowMap;
    renderer.shadowMapSoft = true;
    container.appendChild( renderer.domElement );

}

function animate(){
    requestAnimationFrame( animate );

    controls.update();
    camera.lookAt(scene.position);
    renderer.render(scene, camera);
}

И это мой текущий результат: http://gyazo.com/931f9103e01a5985508897fb1a5d0b88