three js pointer lock controls rotation isn't centered on my camera location

Question

i have added first person controls to my camera in three js using pointer lock and here is my code that is in the FPControls.js file i have created

/**
 * @author mrdoob / http://mrdoob.com/
 */

THREE.PointerLockControls = function ( camera ) {

        var scope = this;

        camera.rotation.set( 0, 0, 0 );

        var pitchObject = new THREE.Object3D();
        pitchObject.add( camera );

        var yawObject = new THREE.Object3D();
        yawObject.position.y = camera.position.y;
        yawObject.add( pitchObject );

        var PI_2 = Math.PI / 2;

        var onMouseMove = function ( event ) {

            if ( scope.enabled === false ) return;

            var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
            var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;

            yawObject.rotation.y -= movementX * player.turnSpeed;
            pitchObject.rotation.x += movementY * player.turnSpeed;

            pitchObject.rotation.x = Math.max( - PI_2, Math.min( PI_2, pitchObject.rotation.x ) );

        };

        this.dispose = function() {

            document.removeEventListener( 'mousemove', onMouseMove, false );

        };

        document.addEventListener( 'mousemove', onMouseMove, false );

        this.enabled = false;

        this.getObject = function () {

            return yawObject;

        };

        this.getDirection = function() {

            // assumes the camera itself is not rotated

            var direction = new THREE.Vector3( 0, 0, 0 );
            var rotation = new THREE.Euler( 0, 0, 0, "YXZ" );

            return function( v ) {

                rotation.set( pitchObject.rotation.x, yawObject.rotation.y, 0 );

                v.copy( direction ).applyEuler( rotation );

                return v;

            };

        }();

    };


var controls;        
        var havePointerLock = 'pointerLockElement' in document || 'mozPointerLockElement' in document || 'webkitPointerLockElement' in document;
            if ( havePointerLock ) {
                var element = document.body;
                var pointerlockchange = function ( event ) {
                    if ( document.pointerLockElement === element || document.mozPointerLockElement === element || document.webkitPointerLockElement === element ) {
                        controlsEnabled = true;
                        controls.enabled = true;
                        blocker.style.display = 'none';
                    } else {
                        controls.enabled = false;
                        blocker.style.display = '-webkit-box';
                        blocker.style.display = '-moz-box';
                        blocker.style.display = 'box';
                        instructions.style.display = '';
                    }
                };
                var pointerlockerror = function ( event ) {
                    instructions.style.display = '';
                };
                // Hook pointer lock state change events
                document.addEventListener( 'pointerlockchange', pointerlockchange, false );
                document.addEventListener( 'mozpointerlockchange', pointerlockchange, false );
                document.addEventListener( 'webkitpointerlockchange', pointerlockchange, false );
                document.addEventListener( 'pointerlockerror', pointerlockerror, false );
                document.addEventListener( 'mozpointerlockerror', pointerlockerror, false );
                document.addEventListener( 'webkitpointerlockerror', pointerlockerror, false );
                instructions.addEventListener( 'click', function ( event ) {
                    instructions.style.display = 'none';
                    // Ask the browser to lock the pointer
                    element.requestPointerLock = element.requestPointerLock || element.mozRequestPointerLock || element.webkitRequestPointerLock;
                    if ( /Firefox/i.test( navigator.userAgent ) ) {
                        var fullscreenchange = function ( event ) {
                            if ( document.fullscreenElement === element || document.mozFullscreenElement === element || document.mozFullScreenElement === element ) {
                                document.removeEventListener( 'fullscreenchange', fullscreenchange );
                                document.removeEventListener( 'mozfullscreenchange', fullscreenchange );
                                element.requestPointerLock();
                            }
                        };
                        document.addEventListener( 'fullscreenchange', fullscreenchange, false );
                        document.addEventListener( 'mozfullscreenchange', fullscreenchange, false );
                        element.requestFullscreen = element.requestFullscreen || element.mozRequestFullscreen || element.mozRequestFullScreen || element.webkitRequestFullscreen;
                        element.requestFullscreen();
                    } else {
                        element.requestPointerLock();
                    }
                }, false );
            } else {
                instructions.innerHTML = 'Your browser doesn\'t seem to support Pointer Lock API';
            }

            var controlsEnabled = false;
            var moveForward = false;
            var moveBackward = false;
            var moveLeft = false;
            var moveRight = false;
            var canJump = false;
            var prevTime = performance.now();
            var velocity = new THREE.Vector3();

this is the code in my main file in the init function

    controls = new THREE.PointerLockControls( camera );
    scene.add( controls.getObject() );
            var onKeyDown = function ( event ) {
                switch ( event.keyCode ) {
                    case 38: // up
                    case 87: // w
                        moveForward = true;
                        break;
                    case 37: // left
                    case 65: // a
                        moveLeft = true; break;
                    case 40: // down
                    case 83: // s
                        moveBackward = true;
                        break;
                    case 39: // right
                    case 68: // d
                        moveRight = true;
                        break;
                    case 32: // space
                        if ( canJump === true ) velocity.y += 350;
                        canJump = false;
                        break;
                }
            };
            var onKeyUp = function ( event ) {
                switch( event.keyCode ) {
                    case 38: // up
                    case 87: // w
                        moveForward = false;
                        break;
                    case 37: // left
                    case 65: // a
                        moveLeft = false;
                        break;
                    case 40: // down
                    case 83: // s
                        moveBackward = false;
                        break;
                    case 39: // right
                    case 68: // d
                        moveRight = false;
                        break;
                }
            };
            document.addEventListener( 'keydown', onKeyDown, false );
            document.addEventListener( 'keyup', onKeyUp, false );

it all works fine except for the fact that the rotaion of the camera doesnt seem centered on my actual position and it doesn't look right is there something im doing wrong and can someone please help me