Camera focus point position changes when holding "Control Key" on Mac

As the title says, my camera has this weird behaviour where it updates positions when holding the Control key and moving the camera.

As you can hopefully see from this gif that my camera works fine, and then when I hold “Control” the camera positions starts shifting when moving the mouse:

chrome-capture-2024-7-6 (1)

Here is how i create the camera and focuspoint:

private createCamera() {

  const focusPoint = this.createCameraFocusPoint(); // Create the camera focus point

   // Parent the focus point to the player mesh
    focusPoint.parent = this.mesh;

   // Check if the device is mobile and adjust the radius accordingly
   const isMobile = isMobileDevice();
   const radius = isMobile ? 22 : 20; // Use a larger radius for mobile devices

  // Parameters: name, alpha (rotation), beta (height), radius (distance), target position, scene
  this.camera = new ArcRotateCamera("playerCamera", 0, 1.5, radius, focusPoint.position, this.scene);
  this.camera.attachControl(this.scene.getEngine().getRenderingCanvas(), true);
  
  // Now lock the camera's target to the focusPoint mesh
  this.camera.lockedTarget = focusPoint;

  // Remove default camera controls that may interfere
  this.camera.inputs.removeByType("ArcRotateCameraKeyboardMoveInput");
  this.camera.inputs.removeByType("ArcRotateCameraMouseWheelInput");

  this.camera.lowerBetaLimit = 0.02; // Prevent the camera from looking directly up
  this.camera.upperBetaLimit = Math.PI / 2 + 1; // Prevent the camera from looking directly down
    const pointersInput = this.camera.inputs.attached.pointers as ArcRotateCameraPointersInput;
      if (pointersInput) {
        pointersInput.angularSensibilityX = 1500; // Adjust as needed
        pointersInput.angularSensibilityY = 1500; // Adjust as needed
      }

   

      // Enable collisions for the scene
      this.scene.collisionsEnabled = true;

      // Enable collisions for the camera
      this.camera.checkCollisions = true;
      this.camera.collisionRadius = new Vector3(0.4, 0.4, 0.4); // Adjust the collision radius as needed
  
      // Enable collisions only for specific meshes (e.g., ground)
      const ground = this.scene.getMeshByName("ground");
      if (ground) {
        ground.checkCollisions = true;
      }
  
      // If you have specific meshes like ground or other objects, enable their collisions explicitly
      // Example:
      // this.ground.checkCollisions = true;
      
    // Handle camera collision response
    this.handleCameraCollisions();
}

private handleCameraCollisions() {
    // Save the initial radius of the camera
    const initialRadius = this.camera.radius;

    // Add an observable to check camera position before each render
    this.scene.registerBeforeRender(() => {
        if (this.camera.radius < initialRadius) {
            // Reset camera radius to initial value if it moved closer due to a collision
            this.camera.radius = initialRadius;
        }
    });
}



private createCameraFocusPoint() {
  // Create an invisible mesh that will act as the focus point for the camera
  const focusPoint = new Mesh("focusPoint", this.scene);
  focusPoint.position = (new Vector3(2.2, 1.1, 1.8)); // Set position relative to player mesh
  focusPoint.isVisible = false; // Make the mesh invisible
  return focusPoint;
}

I tried adding some logic in my inputControls file but it didn’t seem to work:

 public updateCamera(): void {


        if (this.rightStick && this.rightStick.pressed && this.camera && !this.keyboard?.getInput(17)) {
            const deltaPosition = this.rightStick.deltaPosition;

            
            this.camera.alpha -= deltaPosition.x * 0.3; // Adjust sensitivity as needed
            this.camera.beta -= deltaPosition.y * 0.3; // Adjust sensitivity as needed

            // Clamp beta to prevent the camera from flipping upside down
            this.camera.beta = Math.max(0.1, Math.min(Math.PI / 2 + 1, this.camera.beta));
        }
    }

Any suggestions on how to stop the control key from triggering this behaviour? Appreciate the help!

Create a Playground to reproduce the issue. Thx!

Sure, here it is:

I just added the Arc Rotate Camera to the basic scene, and you can see a similar behaviour. When holding the Control Key you can change the position of the camera basically.

Hope this makes sense!

Yes, the camera is panning when holding the CTRL key. What’s the issue? :slight_smile:

I was trying to stop this from happening in my project but couldn’t… :smiley:

Actually now that you said it is the panning that’s causing this, I managed to turn it off by adding:

  // Ensuring the pointer input is correctly referenced
    if (pointersInput) {
        // Initially set the panning sensitivity to a default value
        pointersInput.panningSensibility = 1000;

        let ctrlPressed = false;

        window.addEventListener('keydown', (event: KeyboardEvent) => {
            if (event.key === 'Control' || event.code === 'ControlLeft' || event.code === 'ControlRight') {
                ctrlPressed = true;
                pointersInput.panningSensibility = 0; // Disable panning
            }
        });

        window.addEventListener('keyup', (event: KeyboardEvent) => {
            if (event.key === 'Control' || event.code === 'ControlLeft' || event.code === 'ControlRight') {
                ctrlPressed = false;
                pointersInput.panningSensibility = 1000; // Re-enable panning
            }
        });
    }

Thanks for the help! :slight_smile:

1 Like

Nice code however a little trick will do the job as well :slight_smile:

 camera._useCtrlForPanning = false;
1 Like

Much better :smiley: I’ll let my AI assistant know haha

1 Like

Usually, you specify this when you call attachControl instead. this is the 3rd param of the function :slight_smile: It would prevent you from using an “internal” field that is subject to future changes

2 Likes