Make object movement smoother

Hi!
At the moment the object rotates (X & Y) slightly as you move the mouse around the canvas but I’d like to make this movement smoother. Could anyone guide me so I know I’m going in the right direction please? I’m quite new to Babylon JS so I’m not sure if this is going to even work. So far the function below doesn’t work:

function onMouseMove(){
    camera.target = ground;
    var xRotation = new BABYLON.Animation("ground", "rotation.x", 30,
    BABYLON.Animation.ANIMATIONTYPE_FLOAT,
    BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

    var xRotation = ground.rotation.x = -(scene.pointerY-canvas.height/2)/2000;
    var yRotation = ground.rotation.y = -(scene.pointerX-canvas.width/2)/2800;
    
    var easingFunction = new BABYLON.CubicEase();
    easingFunction.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEIN);
    xRotation.setEasingFunction(easingFunction);
    yRotation.setEasingFunction(easingFunction);
    ground.animations.push(xRotation);
}
canvas.addEventListener('mousemove',onMouseMove);

Here’s is the playground:
https://www.babylonjs-playground.com/#VHWT1E#2

Thanks!

Here is an example I did some times ago (using inertia)
https://playground.babylonjs.com/#4UG8JK#1 (hit C first)

Thank you and sorry for the late reply @Deltakosh. I haven’t had the chance to do any work on this til today. I took your advice and used inertia to apply a smoother movement. Although it seems to work I noticed that if the mouse leaves the canvas let’s say from the top left corner and enters it back from the top right corner, eventually, after repeating those actions a few times, you’re able to horizontally rotate the map all the way. Same thing happens vertically when the mouse leaves from top/bottom.

You can test it out here:
https://www.babylonjs-playground.com/#VHWT1E#3

That makes me wonder if there’s any way to prevent this from happening maybe setting up a max X,Y on rotation?

Pinging @sebavan while I’m oof:)

Maybe smthg along those lines ? https://www.babylonjs-playground.com/#VHWT1E#9 (locking only on one axis for demo pupose)

Also @JohnK loves maths with @jerome :slight_smile:

Thanks for helping out @sebavan. I added these conditionals to vertically rotate the map but it’s certainly not working as expected:

if  ((eu.x < 0.2 && offsetY < 0)) {
    inertialBeta -= (offsetY * angularSpeed)/45;
}
if  ((eu.x > -0.2 && offsetY > 0)) {
    inertialBeta -= (offsetY * angularSpeed)/45;
}

inertialBeta keeps getting triggered even when eu.x value is lower/higher than 0.2/-0.2

You this case you might need to inverse offsetY https://www.babylonjs-playground.com/#VHWT1E#10

1 Like

It makes complete sense. I thought inverting eu.y and offsetX would do the job

Thank for your help @sebavan