CreateAndStartAnimiation ease in for mesh rotation (flips)

Questions
1

I am trying to ease into target while targeting a mesh for mesh rotation instead of model center rotation (arch rotate cam). We have allowed upside down so the model can rotate around the Y axis fully. When I target a mesh along the alpha it set targets correctly and eases in. however if i move the model far along the beta it will flip it when I target the mesh.

I’ve been looking at the camera postion and played around with that but it seems strange why it is doing this. Does anyone have any ideas please?

https://playground.babylonjs.com/#7F6S08#33

export function targetMesh(scene, camera, defaultTarget) {
  //use scene picking ray to detect mesh for camera target
  const ray = scene.createPickingRay(
    scene.pointerX,
    scene.pointerY,
    BABYLON.Matrix.Identity(),
    camera
  );
  const hit = scene.pickWithRay(ray);

  const speed = 100;
  const ease = new BABYLON.SineEase();
  const previousTarget = camera.target;

  if (!hit.pickedMesh) {
    ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
    // BABYLON.Animation.CreateAndStartAnimation('at4', camera, 'position', speed, 120, camera.position, global_position, 0, ease);
    BABYLON.Animation.CreateAndStartAnimation('at5', camera, 'target', speed, 120, camera.target, defaultTarget, 0, ease);
  } else {
    const targetEndPos = hit.pickedMesh._boundingInfo.boundingBox.centerWorld;
    // hit.pickedMesh.computeWorldMatrix();
    // var matrix = hit.pickedMesh.getWorldMatrix(true);
    // var local_position = targetEndPos
    // local_position.addInPlace(targetEndPos);
    // var global_position = BABYLON.Vector3.TransformCoordinates(local_position, matrix);
    // camera.setTarget(targetEndPos);
    ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
    // BABYLON.Animation.CreateAndStartAnimation('at4', camera, 'position', speed, 120, camera.position, targetEndPos, 0, ease);
    BABYLON.Animation.CreateAndStartAnimation('at5', camera, 'target', speed,120, previousTarget, targetEndPos, 0, ease);


  
  }
}

these are the corridnates before and after the flip:

camera e {x: 51.70818065172034, y: -2476.129942213039, z: -19806.38342037944}
camera e {x: 51.708180651442035, y: -2476.12994221302, z: -19806.38342037942}

I can see the end decimals have changes and one added to X but nothing else jumps out at me

Last point, I’ve played around setting the camera position too but still having a similar issue. seems like when it rotates to far over or under the Y (beta) it loses track of its cords and reverts me back to something it can handle

2

Does this have to do with quaternions? @RaananW

3

am not sure, do you think so?

4

Nope, i don’t think so (thou I never want to rule things out :slight_smile: ).

Would be interesting to se the camera rotation code. Are you using the native arc rotate camera?

1 Like
5

yeah for rotation its just basic (scene.createDefaultCamera) arc rotate camera, however we switch to oth mode for panning and zoom, tho it shoudlnt affect it.

it doesnt like going over the normal limits and to target the mesh, just flips

6

would you be able to reproduce this or provide us with a working (well, non-working) example?

7

here we go. https://playground.babylonjs.com/#7F6S08#33

@RaananW

8

Looking great! what is the best way to reproduce this? I tried and tried and it all worked as expected

9

so the doubletap function will activate rotation on a clicked mesh then to return to default rotation you double click off the model (canvas) When you rotate around the beta past the normal limits (up or down) then target a mesh for target rotation it will flip (invert). Basically spin it up/down 180degrees

I could make a video to show the issue if you dont experience it, thanks for looking into it btw :slight_smile:

10

yep, a quick video would be great :slight_smile:

11

@RaananW here is a quick video illustrating

1 Like
12

Animating the alpha and beta (while making sure they don’t “flip” with negative values) will work. Something like this?

https://playground.babylonjs.com/#7F6S08#34

The problem is that we, in general, don’t care if the alpha value is 1.7 or (1.7 - Math.PI), for the camera it is the same value. But when you try animating, it “flips” because beta (for example) went above Math.PI / 2, and the math we are using is simply flipping it to -Math.PI / 2.

Reading this I think i could have explained a bit better, but the gist of things is - animate not only the target, but modified alpha/beta/radius and you will get what you (probably) wanted

1 Like
13

Thanks alot for looking into it and it works great, however is there a possibilty to not rotate the model so much when it goes above/blow Math.PI / 2, as I am trying to not rotate the model when setting target so much and keep on the same plane.

I’ll do a quick video to show my use case. thanks again tho - really helpful of you

If your solution is the correct way am happy to go with it