Full-page Shapespark iframe

1

For interested, we are sharing a code example on how to embed a Shapespark scene so that it fills the entire parent web page and correctly responds to mobile device orientation changes.

The code is a result of investigation of an issue reported by a user, who was facing Shapespark iframe responsiveness problems on their own web page.

<!doctype html>
<html>
  <head>
    <meta charset=utf-8>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>Visualization</title>
    <style>
      body, html {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
      }
      iframe {
        width: 100%;
        height: 100%;
        border: none;
      }
    </style>
  </head>
  <body>
    <iframe src="https://demo.shapespark.com/example-room"
            scrolling="no" allowfullscreen allow="gyroscope; accelerometer; vr">
    </iframe>
  </body>
</html>
8 Likes
2

I’ve updated the code in my first post, because the first version had some issues on mobile browsers.

3

One thing to note about embedding Shapespark iframes is that mobile Firefox and mobile Safari do not allow a cross-origin iframe to access device sensors like gyroscope and accelerometer. So, the VR mode is not working in these browers if the parent website has different origin (protocol + domain + port) from the Shapespark scene. Hopefully, this will change in the future, as Firefox and Safari start supporting whitelisting features in the allow attribute of an iframe.

4

thanks for updating the code Wojciech. I am facing two issues right now-
1- there is a performance loss in vrmode(comparably slow) when the shapespark link is iframed onto our server when viewed on android mobile.
2- On my iphone 6s, there is no vr button visible on iframed link even in Google Chrome.

Did anyone else report the same issues?

5
  1. It looks as if the VR iframe is running in emulated mode (via webvr-polyfill). Could you check these three things?
    • Are you using HTTPS protocol for both the parent website and the iframe?
    • Do you have the allow="vr" iframe attribute set?
    • Do you have WebVR support enabled in chrome://flags?
  2. Sorry, I was imprecise in my previous post: Not only Safari, but all iOS browsers do not allow a cross-origin iframe to access device sensors like gyroscope and accelerometer. So, on iOS, there is no orientation tracking in VR for a cross-origin iframe. The only way for VR orientation tracking to work in on iOS and Firefox/Android is to use the same origin for the parent website and the iframe.
6

Hello,

There is an unexpected yellow border in our website where we have Shapespark Scene embedded.

Capture
Capture402×794 20.6 KB

We have disabled the border through CSS in all possible element hierarchy, but it still doesn’t go away.

This border is visible only sometimes, not always.

Is there a way to disable it entire through some code ?

Thank you.

7

Could you check if this issue still occurs after the Shapespark 2.5.1 release?