Is there a way to fix the camera to one target/ disable panning in React app

simran_jain · August 18, 2020, 2:02am

I have multiple camera facing different views. I have set my arcRotateCamera to its target. Is there anyway I can disable the screen panning in the arcRotateCamera component in ReactApp.

Evgeni_Popov · August 18, 2020, 10:28am

@brianzinn may know about this one.

brianzinn · August 18, 2020, 5:57pm

If you are not using react-babylonjs then the answers would be non-specific to React and then it’s easier to get help from the community with more generic questions!

There is a lot of power to handle pointer events yourself. You can remove the existing inputs entirely like this:
camera.inputs.removeByType('ArcRotateCameraPointersInput');
https://playground.babylonjs.com/#W3WB9S

That will remove all input and is likely not what you are after!

Here is the default input handler, so you could modify it an register/replace the default behavior:

github.com

BabylonJS/Babylon.js/blob/master/src/Cameras/Inputs/arcRotateCameraPointersInput.ts

import { Nullable } from "../../types";
import { serialize } from "../../Misc/decorators";
import { ArcRotateCamera } from "../../Cameras/arcRotateCamera";
import { CameraInputTypes } from "../../Cameras/cameraInputsManager";
import { BaseCameraPointersInput } from "../../Cameras/Inputs/BaseCameraPointersInput";
import { PointerTouch } from "../../Events/pointerEvents";

/**
 * Manage the pointers inputs to control an arc rotate camera.
 * @see https://doc.babylonjs.com/how_to/customizing_camera_inputs
 */
export class ArcRotateCameraPointersInput extends BaseCameraPointersInput {
    /**
     * Defines the camera the input is attached to.
     */
    public camera: ArcRotateCamera;

    /**
     * Gets the class name of the current input.
     * @returns the class name

This file has been truncated. show original

I would read this article - it’s got lots of useful tips for customizing the input:
https://babylonjsguide.github.io/intermediate/Customizing_Inputs#customizing-camera-inputs

Let us know how that goes. Cheers.

Wingnut · August 18, 2020, 6:57pm

Hi gang. If I may butt-in with simpleton-talk…

IF… by the term “panning”… @simran_jain meant right-mouse-button dragging (slewing cam target)… then here are some easy possibilities:

camera.inputs.attached.pointers.buttons = [0,1]; // disables right button
(thx BrianZinn… good to see you)

or…

camera.panningDistanceLimit = .0001; // Makes RMB-drag do almost NOTHING to the target position.

or…

camera.panningSensibility = 0; Essentially disables RMB dragging.

But IF @simran_jain REALLY meant to say “orbit” instead of “panning”… then…

camera.inputs.attached.pointers.buttons = [2]; // disables LEFT and CENTER button… no orbiting possible. (somewhat similar to detaching camera from canvas)

Just a few “dirty hacks”. These “hacks” might conflict-with touch-screen gestures such as pinching and swiping. No promises.

czizzychen · May 24, 2024, 4:42am

use camera.lockedTarget

https://doc.babylonjs.com/typedoc/classes/BABYLON.TargetCamera#lockedTarget

Topic		Replies	Views
How to constraint pointer inputs? Questions	1	1236	February 21, 2019
How to disable the camera rotation input? Questions	3	2744	October 23, 2019
Customising camera doesn't seem to work for me Questions documentation , tutorial	4	670	July 16, 2020
Getting Pan event back from arcRotateCamera Questions	2	788	July 1, 2020
Struggling to completely disable zoom on ArcRotateCamera in production builds Questions camera , arcrotatecamera	4	1198	August 2, 2022

Is there a way to fix the camera to one target/ disable panning in React app

Related Topics