Player Model Flips Over When Looking Around

Help & Support
1

I have made a 3d controllable camera and I have a player model that follows the y and z rotations but not the x so my player doesn’t tilt up and down and it works great but when you look left or right 180 degrees the model flips over. I’ve spent the last 2 hours trying to figure out a way to stop if anyone has an idea let me now.

The code looks like this

var Roatater = pc.createScript('roatater');
Roatater.attributes.add('Rotater', {type: 'entity'});

Roatater.prototype.initialize = function() {

};

Roatater.prototype.update = function(dt) {
    this.entity.setEulerAngles(0, this.Rotater.getRotation().y + 45, this.Rotater.getRotation().z);
};
2

Try using

this.entity.getEulerAngles()

And

this.entity.setEulerAngles()
1 Like
3

I am I’ve posted my code above the issue is it flips over

4

Actually i was crazy, just use:

(If you want to do in the Local Context)

this.entity.rotateLocal(0, 90, 0);

or

this.entity.rotate(0, 90, 0);
5

This happens because a rotation of a model is in a matrix and getting euler angles from it are generally restricted between -180 to 180. When an axis is set beyond that, the representation of orientation can be represented by other axis ‘flipping’.

See video:

Because you are using the Z euler angle from the entity rather than storing your own, it and the X axis will flip from 0 to 180 once the Y angle goes beyond 180.

1 Like
6

Ok but how do I fix it?

7

Rather than using than relying on the euler angles that are calculated from the entity matrix, you keep track of the rotation values yourself or use https://developer.playcanvas.com/api/pc.Entity.html#rotate instead in this case.

8

But the thing is need the 2 entity’s to match.
Could I do

if (this.Rotater.getEulerAngles(). z > 0) {
    this.entity.setEulerAngles(-180, this.Rotater.getRotation().y + 45, this.Rotater.getRotation().z);
}else{
    this.entity.setEulerAngles(0, this.Rotater.getRotation().y + 45, this.Rotater.getRotation().z);
}
9

never mind that didn’t work

10

Hi @WilliamBoersma31! Please use the code highlight format if you want to use some code in your post. This will keep your post including your code easy to read.

image

11

@WilliamBoersma31 have you tried using:

this.entity.rotate(0, 90, 0);

?
These enable you to ignore the model inverting mechanics

12

yeah but it rotates it every frame I need it to match the rotation of the camera holder. Is there any other way to ignore the matrix and just rotate more than 180 degrees?

13

Change to:

this.entity.rotate(0, 45 * dt, 0)

Change the 45 value to whatever you need it to be.

14

I tried

this.entity.rotate(0, this.Rotater.getEulerAngles().y - this.entity.getEulerAngles().y + 45, 0);

and it kind of worked it stopped flipping over and looked the right way but when you look around it would just have a stroke. is there any other way to bypass the rotation matrix?

15

hey I decided to settle for just parenting the model to the rotater this has taken way more of my time than I would have liked I may come back to it in the future but for now I’m done

16

Why have you done this instead of what I posted?

this.entity.rotate(0, 45 * dt, 0)

This adds (45 * dt) degree to the Y axis rotation

17

because that will just rotate it I need to set it to the same rotation as the Rotater

18 
this.entity.setRotation(this.Rotater.getRotation());
this.entity.rotate(0, 45 * dt, 0);
19

that does the same thing as just parenting it

20

Yes, I’m just showing how to do if you didn’t want it to be parented (ie you don’t want the entity to be affected by the rotater scale and position for instance)