threejs pointerlockcontrols camera rotation after rotation over z

cubesareneat 0
Viewed 27

I made some minor changes to pointerlockcontrols so that when the camera is rotated useing this:

      _R.copy(this._params.camera.quaternion);
      if (input._keys.q) {
        _A.set(0, 0, 1);
        _Q.setFromAxisAngle(_A, 0.5 * Math.PI * timeInSeconds);
        _R.multiply(_Q);
        this._params.camera.quaternion.copy(_R);
      }

a new box called "this.CameraCube" and/or "camera.children[0]" is placed at mouse input X/Y relitive to the camera. then .lookAt should turn the camera towards the cube but when camera roates over z if (input._keys.q), then onMouseMove will remove the roation over z, otherwise it is functionaly the same as the original pointerlockcontrols

class PointerLockControls extends EventDispatcher {

        constructor( camera, domElement ) {

                super();

                if ( domElement === undefined ) {

                        console.warn( 'THREE.PointerLockControls: The second parameter "domElement" is now mandatory.' );
                        domElement = document.body;

                }

                this.domElement = domElement;
                this.isLocked = false;

                // Set to constrain the pitch of the camera
                // Range is 0 to Math.PI radians
                this.minPolarAngle = 0; // radians
                this.maxPolarAngle = Math.PI; // radians

                const scope = this;
//new
this.CameraCube = new Mesh(
      new BoxGeometry( 10.0, 10.0, 10.0 ),
      new MeshBasicMaterial( {color: 0xffff00} ));
camera.add(this.CameraCube);
this.CameraCube.position.set(0,0,0);    // -z is infront of the camera, camera looks down -z


                function onMouseMove( event ) {

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


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



//new
camera.children[0].position.set(movementX, -movementY, -100); // -100 is the turn speed 0 is 90 degrees a frame and smaller i.e. -99999 is slower
var targetvec3 = new Vector3();
camera.children[0].getWorldPosition(targetvec3); // get target cube pos
camera.lookAt(targetvec3);

                        scope.dispatchEvent( _changeEvent );

                }

i highlighted my changes to pointerlockcontols with //new the original is here https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/PointerLockControls.js

three.js javascript
1 Answers

here is a version of pointerlockcontrols i made that dose what i want, i still want to know why the original did not work like this [everything i changed is in function onMouseMove() and imports

import {
    Euler,
    EventDispatcher,
    Vector3,
    Quaternion,
} from '/three.module.js';


const _euler = new Euler( 0, 0, 0, 'YXZ' );
const _vector = new Vector3();

const _changeEvent = { type: 'change' };
const _lockEvent = { type: 'lock' };
const _unlockEvent = { type: 'unlock' };

const _PI_2 = Math.PI / 2;

class PointerLockControls extends EventDispatcher {

    constructor( camera, domElement ) {

        super();

        if ( domElement === undefined ) {

            console.warn( 'THREE.PointerLockControls: The second parameter "domElement" is now mandatory.' );
            domElement = document.body;

        }

        this.domElement = domElement;
        this.isLocked = false;

        // Set to constrain the pitch of the camera
        // Range is 0 to Math.PI radians
        this.minPolarAngle = 0; // radians
        this.maxPolarAngle = Math.PI; // radians

        const scope = this;

        function onMouseMove( event ) {

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

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



var _R = new Quaternion();
var _Q = new Quaternion();
var _A = new Vector3(0, -1, 0);
_R.copy(camera.quaternion);
_Q.setFromAxisAngle(_A, 0.01 * movementX);  // move left + right
_R.multiply(_Q);
camera.quaternion.copy(_R);


var _R = new Quaternion();
var _Q = new Quaternion();
var _A = new Vector3(-1, 0, 0);
_R.copy(camera.quaternion);
_Q.setFromAxisAngle(_A, 0.01 * movementY);  // move Up + down
_R.multiply(_Q);
camera.quaternion.copy(_R);



            scope.dispatchEvent( _changeEvent );

        }

        function onPointerlockChange() {

            if ( scope.domElement.ownerDocument.pointerLockElement === scope.domElement ) {

                scope.dispatchEvent( _lockEvent );

                scope.isLocked = true;

            } else {

                scope.dispatchEvent( _unlockEvent );

                scope.isLocked = false;

            }

        }

        function onPointerlockError() {

            console.error( 'THREE.PointerLockControls: Unable to use Pointer Lock API' );

        }

        this.connect = function () {

            scope.domElement.ownerDocument.addEventListener( 'mousemove', onMouseMove );
            scope.domElement.ownerDocument.addEventListener( 'pointerlockchange', onPointerlockChange );
            scope.domElement.ownerDocument.addEventListener( 'pointerlockerror', onPointerlockError );

        };

        this.disconnect = function () {

            scope.domElement.ownerDocument.removeEventListener( 'mousemove', onMouseMove );
            scope.domElement.ownerDocument.removeEventListener( 'pointerlockchange', onPointerlockChange );
            scope.domElement.ownerDocument.removeEventListener( 'pointerlockerror', onPointerlockError );

        };

        this.dispose = function () {

            this.disconnect();

        };

        this.getObject = function () { // retaining this method for backward compatibility

            return camera;

        };

        this.getDirection = function () {

            const direction = new Vector3( 0, 0, - 1 );

            return function ( v ) {

                return v.copy( direction ).applyQuaternion( camera.quaternion );

            };

        }();

        this.moveForward = function ( distance ) {

            // move forward parallel to the xz-plane
            // assumes camera.up is y-up

            _vector.setFromMatrixColumn( camera.matrix, 0 );

            _vector.crossVectors( camera.up, _vector );

            camera.position.addScaledVector( _vector, distance );

        };

        this.moveRight = function ( distance ) {

            _vector.setFromMatrixColumn( camera.matrix, 0 );

            camera.position.addScaledVector( _vector, distance );

        };

        this.lock = function () {

            this.domElement.requestPointerLock();

        };

        this.unlock = function () {
            scope.domElement.ownerDocument.exitPointerLock();
        };
        this.connect();
    }
}
export { PointerLockControls };
cubesareneat0
Related