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

Content creation (3dsMax, Maya, Blender, glTF)
,
1

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.

2

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
3

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