I got an interesting question about coordinate system

Help & Support
1

I use the engine directly,and my project needs to be rotated 90 degrees in vertical screen mode,and this is my css ：

@media screen and (orientation: portrait) {
  /* css[竖向定义样式] */
  body {
    height: 100vw;
    width: 100vh;
    transform-origin: 0 0;
    transform: rotate(90deg) translateY(-100%);
  }
  ...
}

other elements are very good as my expected,and I have made 3D scene a good fit also，the only problem is that if I want to do a horizontal rotation,it will rotate vertically.
I don’t know how to fix it ,please help ,thank you

2

Hi @fengyu,

That’s quite an innovative way to rotate your PlayCanvas app. I don’t think there is any fix for your case, since you are rotating the canvas element, so everything is using a different plane for reference.

What may help is to create some helper methods in your code, that do “horizontal” and “vertical” rotation as you mean it based on the canvas rotation, and work the right math to get the expected rotation each time.

1 Like
3

Thank you for your help.
I have an idea, as you said:

work the right math to get the expected rotation each time

After rotation the canvas,Z-axis is the same,X-axis is the old Y-axis,Y-axis is the old negative X-axis，based on these,it can be draged normally.

1 Like
4

In this case, wouldn’t it be easier to rotate the camera 90 degrees on the Z axis?

2 Likes
5

Maybe I was wrong for this:

After rotation the canvas,Z-axis is the same,X-axis is the old Y-axis,Y-axis is the old negative X-axis

I think it is an about screen coordinate description actually,so maybe I should rotate the camera on the normal vector of screen.The reason why I was OK before was that the X、Y I operated was about the screen
Anyway,I can’t agree more about your idea,After this busy time,I will try it.