Page 1 of 1

Icon Animation in skin for VR Mode

Posted: Thu Jul 03, 2025 10:20 pm
by 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?

Re: Icon Animation in skin for VR Mode

Posted: Mon Jul 07, 2025 11:04 am
by 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,

Re: Icon Animation in skin for VR Mode

Posted: Tue Jul 08, 2025 3:35 pm
by studio360.com.ua
Thx!