Raycasting in Three.js coordinates seem to be off for some reason

Question

For some reason, the raycaster is detecting the cube like 20 pixels above where the cube is and thus, when I click on the cube 20 pixels above where it is, the event is firing off. I want to click on any piece of the cube and have the event fire off. I'm putting my own spin on this example: http://mrdoob.github.io/three.js/examples/canvas_interactive_cubes.html

Thanks friends

var scene, renderer, raycaster, camera;

var mouse = new THREE.Vector2();

var step = 0;

Init();
Animate();

function Init() {

   // document.addEventListener('mousemove', OnDocumentMouseMove, false);
    document.addEventListener('mousedown', OnDocumentMouseDown, false);


    scene = new THREE.Scene();
    raycaster = new THREE.Raycaster();


    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.set(0, -20, 10);
    camera.lookAt(scene.position);

    //our lights
    var light = new THREE.SpotLight(0xffffff);
    light.position.set(-20,10,100);
    light.castShadow = true;

    scene.add(light);

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

    //create a floor
    var floor = new THREE.Mesh(new THREE.PlaneGeometry(50, 50), new THREE.MeshBasicMaterial({ color: 0x484848 }));
    floor.receiveShadow = true;
    floor.position.set(0, 0, -0.1);
    scene.add(floor);


    //We are going to create color planes. If you click on one, it will change the box that color
    var redPane = new THREE.Mesh(new THREE.PlaneGeometry(3, 3), new THREE.MeshLambertMaterial({ color: 0xff0000 }));
    redPane.position.set(-7, 0, 0);
    redPane.receiveShadow = true;
    redPane.name ="REDPANE"
    scene.add(redPane);

    var bluePane = new THREE.Mesh(new THREE.PlaneGeometry(3, 3), new THREE.MeshLambertMaterial({ color: 0x190097 }));
    bluePane.position.set(-2, 0, 0);
    bluePane.receiveShadow = true;
    scene.add(bluePane);

    var yellowPane = new THREE.Mesh(new THREE.PlaneGeometry(3, 3), new THREE.MeshLambertMaterial({ color: 0xfcff00 }));
    yellowPane.position.set(3, 0, 0);
    yellowPane.receiveShadow = true;
    scene.add(yellowPane);

    var greenPane = new THREE.Mesh(new THREE.PlaneGeometry(3, 3), new THREE.MeshLambertMaterial({ color: 0x004809 }));
    greenPane.position.set(8, 0, 0);
    greenPane.receiveShadow = true;
    scene.add(greenPane);
    //end of colored planes


    cube = new THREE.Mesh(new THREE.CubeGeometry(3, 3, 3), new THREE.MeshPhongMaterial({ color:0x000000}));
    cube.name = "CUBEFRAME";
    cube.position.set(-5, 0, 3);
    cube.castShadow = true;
    scene.add(cube);
    //end of cube frame


    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(0xeeeeee);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMapEnabled = true;
    $('#GameArea').append(renderer.domElement); 

}

function Animate() {
    requestAnimationFrame(Animate);
    Render();

}

function Render() {

    AnimateCube();
    renderer.render(scene, camera);
}

function AnimateCube() {

    step += 0.01;
    scene.traverse(function (e) {

        if (e instanceof THREE.Mesh && e.name == "CUBEFRAME") {

          //  e.position.x = Math.sin(step) * (Math.exp(Math.cos(step)) - 2 * Math.cos(4 * step) - Math.pow(Math.sin(step / 12), 5));
          //  e.position.z = Math.cos(step) * (Math.exp(Math.cos(step)) - 2 * Math.cos(4 * step) - Math.pow(Math.sin(step / 12), 5)) + 5;;

        }
    });
}

/*

/****this is the event that is not working correctly!!!!***/
function OnDocumentMouseDown(event) {
    event.preventDefault();

    mouse.x = (event.clientX / renderer.domElement.width) * 2 - 1;
    mouse.y = -(event.clientY / renderer.domElement.height) * 2 + 1;

    raycaster.setFromCamera(mouse, camera);
    var intersects = raycaster.intersectObjects(scene.children);  
    if (intersects.length > 0) {
        if(intersects[0].object.name == "CUBEFRAME"){
            var cube2 = new THREE.Mesh(new THREE.CubeGeometry(2, 2, 2), new THREE.MeshLambertMaterial({ color: 0xdddddd }));
            cube2.position.set(0, -5, 4);
            scene.add(cube2);

        }
    }

}

});