三个js指针锁控制旋转不以我的相机位置为中心

时间:2017-09-10 04:58:18

标签: javascript three.js pointerlock

我使用指针锁在三个js中为我的相机添加了第一人称控件,这是我创建的FPControls.js文件中的代码

C:\Program Files (x86)\Windows Kits\10\Include\10.0.10240.0\ucrt

这是我在init函数中的主文件中的代码

/**
 * @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();

这一切都很好,除了相机的旋转看起来并不是以我的实际位置为中心并且它看起来不正确有什么我做错了,有人可以帮助我

0 个答案:

没有答案