Shifting of Perspective with Graphics, Images, or Videos

[JimScott]

Hi to All!

I am working on a personal experimental project using a photogrammetric approach to create an interactive 3D walk through of an environment (an art gallery for example) using Hype. Part of my goal in doing this project is to learn more about Hype.

Try placing a default rectangle in the center of the screen, and rotate it 80 degrees on the “Y” axis. Move it about manually. When I do this the element assumes correct perspective based on where it is located on the Stage. Moving it via the Timeline properties has the same effect. This perspective shift occurs with images, graphics & videos - and adjusts for different Stage dimensions (centered vanishing point).

I have not come across this “feature” in my readings to date. Currently this effect is working to my advantage. However, I can visualize situations where I do not want this to happen. Is there a setting somewhere that turns this effect on & off - or is it “just the way it is”?

Thank You.

[MarkHunte]

I do not think there is apart from adjusting the angle again.
I must admit this has caused me problems in the past and I think your question is a good one. If no one knows of a good answer to this it may be worth changing this to a feature request.

Here is a visual for others to understand the issue. The gif below shows the perspective changing when in Hype.
As @JimScott states the same perspective change happens if the movement is done in a Timeline animation.

[Daniel]

This behavior corresponds to the transform origin point of the element. If you hold ⌘ + drag on the center point of the element, it will adjust this point.

https://developer.mozilla.org/en-US/docs/Web/CSS/perspective-origin has more info on this property.

This GIF shows how this affects Y rotation:

[MarkHunte]

Thanks @Daniel, I did realise that

This maybe a silly question.

But is there a way of having it not rotate around the origin point but automatically have angles and origin follow each other is respects to position in the viewport.

Similar to if I group the element then change the elements angle. Then move the group. The Element stays fixed within the group but moves with the group.

[JimScott]

Thank You @MarkHunte for your replies…

And Thank You @Daniel for the insights. Beyond this particular situation, the link You provided illuminates an upcoming situation with my experimental walk through (I mentioned above): How to simply & accurately adjust the viewers’ perspective as they “move” through the set~environment… programmatically the viewer won’t move of course, the set will. Your link saved me a fair amount of research.

[Daniel]

These be uncharted lands – 3D Transforms do different things in nearly every browser, so make sure you test as you go in as many browser as you wish to support. With Y axis rotated walls with textures and some trickery I could definitely see this working though…

[Daniel]

But is there a way of having it not rotate around the origin point but automatically have angles and origin follow each other is respects to position in the viewport.

Similar to if I group the element then change the elements angle. Then move the group. The Element stays fixed within the group but moves with the group.

I think I see what you’re asking, but could you give a visual example? Using groups with transformations definitely fools the element (in the group) into thinking it is operating on another geometric plane. Elements at the top level rotate on a scene-sized plane, while elements within smaller groups make a tighter circle.

[Furutan]

If the element is static, wouldn’t it be easier to rotate it in another app and save it as a png with a transparent background?