Struggling to completely disable zoom on ArcRotateCamera in production builds

Questions
,
1

Hi folks, please help! I’m going a bit crazy here… :cry:

My goal is to completely disable the possibility of zooming in/out with mouse-wheel or touch in my BabylonJS scene.

After reading the documentation, console.logging everything I can and many iterations, I came up with the following configuration:

createCamera = (): void => {
    const fixedAngle = Math.PI / 5;

    const camera = new BABYLON.ArcRotateCamera(
      "camera",
      0,
      fixedAngle,
      25,
      new BABYLON.Vector3(0, 0, 0),
    );
    camera.lowerAlphaLimit = 0;
    camera.upperAlphaLimit = 0;
    camera.upperBetaLimit = fixedAngle;
    camera.lowerBetaLimit = fixedAngle;

    camera.attachControl(this.canvas, false, false);

    camera.inputs.removeByType(ArcRotateCameraKeyboardMoveInput.name);
    camera.inputs.removeByType(ArcRotateCameraMouseWheelInput.name);

    const pointersInput = camera.inputs.attached[
      "pointers"
    ] as ArcRotateCameraPointersInput;
    pointersInput.multiTouchPanAndZoom = false;
    pointersInput.multiTouchPanning = false;
    pointersInput.pinchZoom = false;

    camera._panningMouseButton = 0;
    camera.panningAxis = new BABYLON.Vector3(1, 0, 1);
    camera.panningDistanceLimit = 40;
    camera.panningSensibility = 500;
    camera.panningInertia = 0.95;
    camera.inertia = 0.95;
}

This looks right, no? I explicitly remove everything I can, leave only one method of input and it should only pan. And it does! But only in local builds…

When I run npm start and test it in the browser, both mouse wheel and touch gestures are dead, I can only pan.

When I do a production build, well, I can pan and zoom with either mouse wheel or touch. It behaves as if there’s a flag somewhere which forces the camera to reinitialize using default parameters. How is that possible? I don’t get it.

Any ideas welcome!

3

Hey @plumb_dory,
So when I tried your code in a PG, it didn’t initially work but then I noticed that you’re using .name against the input class name and it was evaluating as e for me. While I’m not sure why this is happening, my current working assumption is that this is because of how the BJS Typescript code is being compiled. In any case, I found that changing your removeByType lines to look like one of the following successfully removed the input.

// either
camera.inputs.removeByType("ArcRotateCameraMouseWheelInput");
// or 
camera.inputs.removeByType(camera.inputs.attached.mousewheel);
2 Likes
5

Whoa, nice intuition! That was it, thank you so much (and I love this forum).

Production builds are minified, i.e. using .name becomes unreliable because ArcRotateCameraMouseWheelInput becomes something like e. Note to myself: never use .name again :slight_smile:

1 Like