How to adjust the zoom to be less sensitive/slower on mobile devices? (SOLVED)

Hello Babylon.JS community! How do you do?

I’m writing this message to ask you some advice on how to control zoom sensitivity on mobile devices. (Since I think it is perfect for PCs).

I was tweaking the following values (without success) in the hope of making the zoom less sensible / slower:

camera1.lowerRadiusLimit = 2;
camera1.upperRadiusLimit = 10;
camera1.wheelDeltaPercentage = 0.01

The state of the “Playground” is this at the moment:

var createScene = function () {

// Low Poly Character with Blender Tutorial of Grant Abbitt: https://www.youtube.com/user/mediagabbitt

engine.enableOfflineSupport = false;

// Scene and Camera
var scene = new BABYLON.Scene(engine);

var camera1 = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 4, 10, new BABYLON.Vector3(0, -5, 0), scene);
scene.activeCamera = camera1;
scene.activeCamera.attachControl(canvas, true);
camera1.lowerRadiusLimit = 2;
camera1.upperRadiusLimit = 10;
camera1.wheelDeltaPercentage = 0.01;

// Lights
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 4.5;
light.specular = BABYLON.Color3.Black();

var light2 = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(0, -0.5, -1.0), scene);
light2.position = new BABYLON.Vector3(0, 5, 5);

// Skybox
var skybox = BABYLON.MeshBuilder.CreateBox("skyBox", { size: 1000.0 }, scene);
var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
skyboxMaterial.backFaceCulling = false;
//skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox2", scene);
//skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
//skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
skybox.material = skyboxMaterial;

// Ground
//var ground = BABYLON.MeshBuilder.CreateGround("ground", { height: 50, width: 50, subdivisions: 4 }, scene);
//var groundMaterial = new BABYLON.StandardMaterial("groundMaterial", scene);
//groundMaterial.diffuseTexture = new BABYLON.Texture("textures/wood.jpg", scene);
//groundMaterial.diffuseTexture.uScale = 30;
//groundMaterial.diffuseTexture.vScale = 30;
//groundMaterial.specularColor = new BABYLON.Color3(.1, .1, .1);
//ground.material = groundMaterial;


// Load hero character and play animation
BABYLON.SceneLoader.ImportMesh("", "https://raw.githubusercontent.com/chicortiz/glb/main/", "demoi12.glb", scene, function (newMeshes, particleSystems, skeletons, animationGroups) {
    var hero = newMeshes[0];

    //Scale the model down        
    hero.scaling.scaleInPlace(0.1);

    //Lock camera on the character 
    camera1.target = hero;

    //Get the Samba animation Group
    //const sambaAnim = scene.getAnimationGroupByName("Samba");

    //Play the Samba animation  
    //sambaAnim.start(true, 1.0, sambaAnim.from, sambaAnim.to, false);

});

return scene;

};

Thank you very much for your time.

Greetings,

Ortiz.

Hi,

you are looking for the configuration of the arc rotatr pointer input. Specifically the pinchPrecision - ArcRotateCameraPointersInput | Babylon.js Documentation (babylonjs.com)

You can access the input directly from the camera, using camera.inputs.attached["pointers"]

1 Like

Thank you so much RaananW!

camera1.pinchPrecision=100 did the trick. The experience on mobile is much smother now.

Here is the updated playground:

var createScene = function () {

// Low Poly Character with Blender Tutorial of Grant Abbitt: https://www.youtube.com/user/mediagabbitt

engine.enableOfflineSupport = false;

// Scene and Camera
var scene = new BABYLON.Scene(engine);

var camera1 = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 4, 10, new BABYLON.Vector3(0, -5, 0), scene);
scene.activeCamera = camera1;
scene.activeCamera.attachControl(canvas, true);
camera1.lowerRadiusLimit = 2;
camera1.upperRadiusLimit = 10;
camera1.wheelDeltaPercentage = 0.01;
camera1.pinchPrecision=100

// Lights
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 4.5;
light.specular = BABYLON.Color3.Black();

var light2 = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(0, -0.5, -1.0), scene);
light2.position = new BABYLON.Vector3(0, 5, 5);

// Skybox
var skybox = BABYLON.MeshBuilder.CreateBox("skyBox", { size: 1000.0 }, scene);
var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
skyboxMaterial.backFaceCulling = false;
//skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox2", scene);
//skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
//skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
skybox.material = skyboxMaterial;

// Ground
//var ground = BABYLON.MeshBuilder.CreateGround("ground", { height: 50, width: 50, subdivisions: 4 }, scene);
//var groundMaterial = new BABYLON.StandardMaterial("groundMaterial", scene);
//groundMaterial.diffuseTexture = new BABYLON.Texture("textures/wood.jpg", scene);
//groundMaterial.diffuseTexture.uScale = 30;
//groundMaterial.diffuseTexture.vScale = 30;
//groundMaterial.specularColor = new BABYLON.Color3(.1, .1, .1);
//ground.material = groundMaterial;


// Load hero character and play animation
BABYLON.SceneLoader.ImportMesh("", "https://raw.githubusercontent.com/chicortiz/glb/main/", "demoi12.glb", scene, function (newMeshes, particleSystems, skeletons, animationGroups) {
    var hero = newMeshes[0];

    //Scale the model down        
    hero.scaling.scaleInPlace(0.1);

    //Lock camera on the character 
    camera1.target = hero;

    //Get the Samba animation Group
    //const sambaAnim = scene.getAnimationGroupByName("Samba");

    //Play the Samba animation  
    //sambaAnim.start(true, 1.0, sambaAnim.from, sambaAnim.to, false);

});

return scene;

};

1 Like