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:
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!
