Unable to access VR mode when scene is in iframe

Customization
1

Hello Shapespark Team,

We are trying to start the VR mode by using the below code.

else if (data.msg === ‘Enter VR Mode’) {
Viewer.enableVr()
}

Our button is on our main web app, and scene is embedded inside the iframe. We are trying to send a postmessage to the 3D scene, and start VR mode. Although there are no errors, the VR mode doesn’t start and says either “VR device not connected” or “Permission necessary for VR mode not granted”.

Things we have ensured so far -

  • Using https protocol
  • Emulating VR HTML click

When the same scene is opened outside of our app, the VR functionality works. But we want to embed the scene and trigger VR function from our webapp, as we have developed our custom UI.

Kindly help us solve this issue.

Thank you.

2

To protect the user from unexpected web page behavior, enabling the VR mode in a browser must be preceded with a clear user action, like clicking a button, on the web page. I am not 100% sure, but I am afraid that in your case this action must be taken inside the embedded page, not the parent page, in which case using the viewer API from the parent page, or calling Viewer.enableVr from the message event handler won’t work.

Are you hosting the scene on your own or on our infrastructure?

Does your iframe element include the necessary VR-related permissions?

3

Hi @wojtek

Yes, the scenes are self bundled and hosted in our infrastructure.

The app is hosted on 3d.virtualhomes.in, and scene is hosted on assets.virtualhomes.in - both are subdomain of virtualhomes.in

We checked iframe code and it’s already giving necessary permission like gyroscope, accelerometer and VR.

Can you please suggest a workaround here.

Thank you.

4

Hello @wojtek ,

As you suggested, we have added the VR button inside the 3D scene html.

Now, when we try to click on this newly added button, it works as expected. However, when the same scene is playing inside an iframe, and when the exact same button is hit, it doesn’t work.

We have already given all three permission - gyroscope, accelerometer and VR inside our iframe html tag.

Can you please help us solve this.

Maybe you can reproduce this issue by calling the VR api for any scene after its embedded in an iframe.

We are also getting these errors in our console. This may be the possible cause

image

Looking for a speedy resolution.

Thank you.

5

Hello @wojtek ,

Can you please share some resolution on this. Your help will be much appreciated.

Awaiting your response

Thanks.

6

@nishantambekar, could you share a link to the scene and the embedding webpage, so we could take a closer look at the issue?

7

The embedded scene is the original demo scene by Shapespark - 3D scene

And the iframe code was copied from your post
https://forum.shapespark.com/t/full-page-shapespark-iframe

We’ve managed to make things work on Android by adding “allowvr=yes” and “allow=xr-spatial-tracking” permissions. However, the issue remains for iOS devices.

We are suspecting that since XR isn’t yet compatible with safari browser, things aren’t working. Trying to find a fix for this

8

The iframe code from the post is outdated. Have you tried the iframe attributes suggested in https://help.shapespark.com/hc/en-us/articles/360008918897-Embed-a-scene-in-a-website ?

1 Like