title: threejs pointerlockcontrols camera rotation after rotation over z
body: <p>I made some minor changes to pointerlockcontrols so that when the camera is rotated useing this:</p>
  <pre><code>      _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);
        }
  </code></pre>
  <p>a new box called &quot;this.CameraCube&quot; and/or &quot;camera.children[0]&quot; is placed at mouse input X/Y relitive to the camera. then <code>.lookAt</code> should turn the camera towards the cube but when camera roates over z <code>if (input._keys.q)</code>, then <code>onMouseMove</code> will remove the roation over z, otherwise it is functionaly the same as the original pointerlockcontrols</p>
  <pre><code>class PointerLockControls extends EventDispatcher {
  
          constructor( camera, domElement ) {
  
                  super();
  
                  if ( domElement === undefined ) {
  
                          console.warn( 'THREE.PointerLockControls: The second parameter &quot;domElement&quot; 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 );
  
                  } 
  </code></pre>
  <p>i highlighted my changes to pointerlockcontols with <code>//new</code> the original is here <a href="https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/PointerLockControls.js" rel="nofollow noreferrer">https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/PointerLockControls.js</a></p>