Mesh.rotation animation issue after mesh.rotation setup

Questions
1

Hello everybody,

So, I moving forward with my card game, which is no more a game, but a card simulation thanks to the immersive experience enabled by babylonjs :slight_smile:

Since I am my own client, I refuse myself nothing, huhu (except that flash death sentence has been declared for 2020).

I was stopped yesterday by some black magic… difficult to provide a pg, but maybe just explaining and pasting some code could be enough to get some hints.

As you can see in the screenshot below, all players played one card and the one who won the turn can start the next one by playing a new card, for the record, in the flash version, there is a short visual timer blocking that next move for a little while to ensure everybody saw what happened.

In that new version, I plan to simulate the end of the timer by animating these four cards as the turn winner would grab them, so there will be different animations applied to each of them, position to group them together a bring them to the winner, rotation to orient them in the same direction AND to flip them on their back.

So, sorry for the looong intro, this is where my issue is happening: I have no problem to animate all these cards in any position axis, but for rotation x is working, y and z are doing EXACTLY the same thing (apparently rotating around the y axis…): I would need z to flip them.

I am currently investigating and what I just discovered is if I comment the rotation of the cards in their setup (which let them wrongly oriented) then I can apply animation rotation in all axis, but as soon as I rotate them during their setup then the problem above reappears…

Some code that I could explain furthermore:

card setup (xAngle = Math.PI/2):
let card3Tapis = new Card(this,1,“cardTest”,this.scene, this.cardWidth, this.cardHeight, this.versoMat);
card3Tapis.mesh.rotation.x= xAngle;
card3Tapis.mesh.position.y=0.11;
card3Tapis.mesh.position.z=2.7;
card3Tapis.mesh.rotation.y= 2*xAngle;

card animation:
let c3ZRot=[];
c3ZRot.push({
frame: 0,
value: this.cardP3.mesh.rotation.z
});
c3ZRot.push({
frame: nbFrame,
value: this.cardP3.mesh.rotation.z+Math.PI
});

let c3ZRotAnim = new BABYLON.Animation(
“c3ZRotAnim”,
“rotation.z”,
nbFrame*3,
BABYLON.Animation.ANIMATIONTYPE_FLOAT,
BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
);

this.scene.beginDirectAnimation(this.cardP3.mesh, [c3XPosAnim, c3ZRotAnim], 0, this.positionResolution, false, 1.0);

image
image.jpg1208Ă—688 362 KB

2 Likes
2

Hey this keeps amazing me because it is definitely beautiful
can you reproduce your issue in the PG?

3

thanks :slight_smile:

I quickly play around and obtained, I think, a similar weird behaviour here

if we keep the same keyframes but just change line 43 rotation axis, it looks like z and y are rotating around the same axis (but different directions) while x looks to work fine…

4

w000t I am looking into it ASAP !!!

5

My guess is that you are completely in Gimbal lock maybe you could try using quaternion for rotation instead of euler Vector ???

6

Interesting (had to google Gimbal lock ;)) so you mean that if I do all with quaternion, both setup orientation and animation, then it should work ?

The issue I have here is that I am now using test cards to speed-up this animation creation but the real cards will arrive there after some previous animations… I am using Euler Vectors already all around… so a bit heavy if I have to switch everything to quaternion :slight_smile:

But for the moment, the player that won the turn doesn’t need to flip the cards he grabs on their back :wink:

1 Like
7

i have exactly the same problem . y and z axis are same . does quaternion worked for you ?