Icon Animation in skin for VR Mode

[studio360.com.ua]

I can’t animate hotspot icons in VR mode. I’m trying to achieve a result like this: https://www.thinglink.com/webvr/1264679527141867522. However, even a simple style (below) only works in a regular browser:

Code: Select all

.medallion {
    position: relative;
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    animation: spinY 4s linear infinite;
}
.medallion svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
@keyframes spinY {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}

When I apply this style to the VR skin, the icons remain static. Any advice?

[Hopki]

Hi,
When viewing in the immersive mode CSS can not be used, everything is done by three.js.
This is why it was such a big deal getting the skin editor working with the immersive view.
You would need to look how to do this using three.js.
Maybe a ChatGPT question.
Regards,

[studio360.com.ua]

Thx!

[studio360.com.ua]

Hi,
When viewing in the immersive mode CSS can not be used, everything is done by three.js.
This is why it was such a big deal getting the skin editor working with the immersive view.
You would need to look how to do this using three.js.
Maybe a ChatGPT question.
Regards,

Hello. Could you please clarify whether it’s impossible to add anything in VR mode? I tried adding text, a red rectangle, an SVG image, and a PNG image, but none of them appear in VR mode. My task is to place a logo in the top-right corner that will always be displayed there. Is this possible? How can it be done?

vr_skin.png (203.87 KiB) Viewed 6357 times

[Hopki]

Hi,
In the immersive mode, the skin is visible when you select the menu; otherwise, it is hidden.
Also, when the skin is shown, it is shown in front of the viewer, at which point it is pinned in that location, so when you rotate your head, the menu will move out of view.
Regards,