three js Не работают тени

Пытаюсь задать тени пишу эту строчку:

renderer.shadowMap.enabled = true;

нечего не появляется, после этого компилятор пишет ошибку:

TypeError: Cannot set property 'enabled' of undefined

код целиком:

var camera, controls, scene, renderer;
var plane
var shoulder, cubit, wrist;
var root_beam, top_beam;
var claw_base, claw_one, claw_two;
function init() {
    // create a scene, that will hold all our elements such as objects, cameras and lights.
    scene = new THREE.Scene();
    // create a camera, which defines where we're looking at.
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
    // create a render and set the size
    renderer = new THREE.WebGLRenderer();
    renderer.setClearColorHex();
    renderer.setClearColor(new THREE.Color(0x000000));
    renderer.setSize(window.innerWidth-350, window.innerHeight-65);
    // show axes in the screen
    var axes = new THREE.AxisHelper(20);
    scene.add(axes);
    // create the ground plane
    var planeGeometry = new THREE.PlaneGeometry(60, 60);
    var planeMaterial = new THREE.MeshBasicMaterial({color: 0xffffff});
    plane = new THREE.Mesh(planeGeometry, planeMaterial);
    // rotate and position the plane
    plane.rotation.x = -0.5 * Math.PI;
    plane.position.x = 0;
    plane.position.y = 0;
    plane.position.z = 0;
    // add the plane to the scene
    scene.add(plane);
    var sphereGeometry = new THREE.SphereGeometry(2, 20, 20);
    var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x8B0000, wireframe: false});
    shoulder = new THREE.Mesh(sphereGeometry, sphereMaterial);
    shoulder.position.z = 2;

    plane.add(shoulder);
    var geometry = new THREE.CylinderGeometry( 1.5, 1.5, 20, 32 );
    var material = new THREE.MeshBasicMaterial( {color: 0x778899} );
    root_beam = new THREE.Mesh( geometry, material );
    root_beam.rotation.x = 0.5 * Math.PI;
    root_beam.position.z = 10;
    shoulder.add(root_beam);
    cubit = new THREE.Mesh(sphereGeometry, sphereMaterial);
    cubit.position.y = 10;
    root_beam.add(cubit);
    top_beam = new THREE.Mesh( geometry, material );
    top_beam.position.y = 10;
    cubit.add(top_beam);
    wrist = new THREE.Mesh(sphereGeometry, sphereMaterial);
    wrist.position.y = 10;
    top_beam.add(wrist);
    var cubeGeometry = new THREE.BoxGeometry(12, 1, 4);
    var cubeMaterial = new THREE.MeshBasicMaterial({color: 0x778899, wireframe: false});
    claw_base = new THREE.Mesh(cubeGeometry, cubeMaterial);
    claw_base.position.y = 2;
    wrist.add(claw_base);
    cubeGeometry = new THREE.BoxGeometry(6, 1, 4);
    cubeMaterial = new THREE.MeshBasicMaterial({color: 0xFF0000, wireframe: false});
    claw_one = new THREE.Mesh(cubeGeometry, cubeMaterial);
    claw_one.rotation.z = 0.5 * Math.PI;
    claw_one.position.y = 3.5;
    claw_one.position.x = 5.5;
    claw_base.add(claw_one);
    cubeMaterial = new THREE.MeshBasicMaterial({color: 0x0000FF, wireframe: false});
    claw_two = new THREE.Mesh(cubeGeometry, cubeMaterial);
    claw_two.rotation.z = 0.5 * Math.PI;
    claw_two.position.y = 3.5;
    claw_two.position.x = -5.5;
    claw_base.add(claw_two);
    shoulder.rotation.y = 0.5;
    cubit.rotation.z = 1.5;
    wrist.rotation.y = 0.8;
    // position and point the camera to the center of the scene
    camera.position.x = -30;
    camera.position.y = 40;
    camera.position.z = 30;
    camera.lookAt(scene.position);
    // add the output of the renderer to the html element
    document.getElementById("imterBody").appendChild(renderer.domElement);
    controls = new THREE.OrbitControls( camera, renderer.domElement );
                //controls.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop)
    controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
    controls.dampingFactor = 0.25;
    controls.screenSpacePanning = false;
    controls.minDistance = 100;
    controls.maxDistance = 500;
    controls.maxPolarAngle = Math.PI / 2;

    window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    //renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
    requestAnimationFrame( animate );
    controls.update();
    render();
}
function render() {
    renderer.render( scene, camera );
}
function start(){
    init();
    animate();
}
window.onload = start;