Having problem with 3d rotation
Hi hii first of all here's a codepen link to my demo
https://codepen.io/Sinc02/pen/WbvVbzK
What I'm trying to do is to basically make a rotating cube on the x-axis (so it'll rotate vertically)
My problem is that it seems I'm also rotating the viewer's pov along with it
6 Replies
So here is the default view of the cube (blue - front)
And this is the back side of the cube (red)
As you can see, the back side of it seems smaller
Which makes sense since in perspective, the further the object from our eyes, it should appear smaller
But I want the back side of the cube to appear the same size as the front when the cube rotates to the back side
I'm guessing this is because I'm rotating the entire thing (user's pov + the cube itself) all together(?)
I'm not really sure
I have a feeling the solution might be straight forward but I'm not sure what should I do to solve this problem
Can anyone give pointers? Thankiess
Oh additionally, the top and bottom side also seems like a trapesium instead of a square
I'm guessing the cause is the same(?)
your issue comes from the element you set the
perspective: 1000px; on, move it to .inside-container and it works fine
as for the why it does that :
Basically the perspective property defines the field of view of the camera used to render 3D stuff (it's an oversimplication but it'll be enought). what happen when you set it is that you define the view frostum of the camera, the chunk of space where if something exists there it will be rendered to the screen. this chunk of space has the same shape as the warped cube you had (I'm not gonna go in details about why that it here)
to get a rotating cube what you need is to rotate the cube in that space, that way the perspective will work the way you expect it to
what you had before was basically rotating the whole space and using another camera (the default one is orthographic, meaning it doesn't do perspective) to render that rotated space, leading to the distortion you where observing
you can look into rasterisation and 3d to 2d projection if you want to understand the topic a bit moreOh you're rightt 😭
Moving the perspective property to
.inner-container does make it look right!
I see I seee so I'm rotating the whole world instead of just the cube
Will definitely keep this one in mind to set the larger element (or the area I want the thing to be in) to be the one that have the perspective property instead of the actual thing
Thank you sooo much for the help man really appreciate it