Start IFRAME in VR Mode


(Glasshandvr) #1

Could someone show me the modification so this embedded IFRAME starts up in VR mode please. Thx.

<iframe src="" id="api-frame" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" width="1024px" height="768px"></iframe>
    
<!-- Initialize the viewer -->
<script type="text/javascript">
var iframe = document.getElementById( 'api-frame' );
var version = '1.0.0';
var urlid = '6a17b5a76f5f46f6a0d586d855dc15c9';

var client = new Sketchfab( version, iframe );

client.init( urlid, {
    success: function onSuccess( api ){
        api.start();
        api.addEventListener( 'viewerready', function() {

            // API is ready to use
            // Insert your code here
            console.log( 'Viewer is ready' );

        } );
    },
    error: function onError() {
        console.log( 'Viewer error' );
    }
} );
</script>

Good News, IFRAME loads in VR Cardboard Mode, but
Can IFRAME be switched to VR Cardboard Mode Programmatically?
IFRAME Switch to VR Cardboard Mode Programtically?
(Glasshandvr) #2

Come on guys, this answer is all I need to make this project a go.


(Mauricesvay) #3

This should work https://jsfiddle.net/8wLrqpxd/


(Glasshandvr) #4

Hate to be a bother but I'm speaking to a panel on the subject of VR shortly and I plan to demonstrate using Sketchfab. I really need to know if I can make Sketchfab come up in VR mode using IFRAME.

I know it can be done using EMBED, but as far as I can tell I don't have access to the scripting mechanism that I get using an IFRAME.

So once again, can this code be modified such that on a mobile device the browser goes directly into Cardboard mode?

<iframe src="" id="api-frame" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" width="1024px" height="548px" style="border: 0px;"></iframe>
    
<!-- Initialize the viewer -->
<script type="text/javascript">
var iframe = document.getElementById( 'api-frame' );
var version = '1.0.0';
var urlid = '311d052a9f034ba8bce55a1a8296b6f9';
var client = new Sketchfab( version, iframe );

client.init( urlid, {
    success: function onSuccess( api ){
        api.start();
        api.addEventListener( 'viewerready', function() {

            // API is ready to use
            // Insert your code here
            console.log( 'Viewer is ready' );

        } );
    },
    error: function onError() {
        console.log( 'Viewer error' );
    }
} );
</script>

(Mauricesvay) #5

This should work https://jsfiddle.net/8wLrqpxd/


(Glasshandvr) #6

I think we have a winner.

[adds code]

Works perfectly. You guys should add that as a highlighted tutorial item.

Thanks.


(Glasshandvr) #7

Can this code be modified such that on a mobile device the browser goes directly into Cardboard mode?

<!-- Initialize the viewer -->
<script type="text/javascript">
var iframe = document.getElementById( 'api-frame' );
var version = '1.0.0';
var urlid = '311d052a9f034ba8bce55a1a8296b6f9';
var client = new Sketchfab( version, iframe );

client.init( urlid, {
    success: function onSuccess( api ){
        api.start();
        api.addEventListener( 'viewerready', function() {

            // API is ready to use
            // Insert your code here
            console.log( 'Viewer is ready' );

        } );
    },
    error: function onError() {
        console.log( 'Viewer error' );
    }
} );
</script>

#8

Yep! You can add any embed parameter to the initialization options:

https://help.sketchfab.com/hc/en-us/articles/203509907-Share-Models#embed-options

<!-- Initialize the viewer -->
<script type="text/javascript">
var iframe = document.getElementById( 'api-frame' );
var version = '1.0.0';
var urlid = '311d052a9f034ba8bce55a1a8296b6f9';
var client = new Sketchfab( version, iframe );

client.init( urlid, {
    success: function onSuccess( api ){
        api.start();
        api.addEventListener( 'viewerready', function() {

            // API is ready to use
            // Insert your code here
            console.log( 'Viewer is ready' );

        } );
    },
    error: function onError() {
        console.log( 'Viewer error' );
    },
    cardboard: 1,
    autospin: 0.5,
    // etc.
} );
</script>

(Glasshandvr) #9

Hate to be a bother but I'm speaking to a panel on the subject of VR shortly and I plan to demonstrate using Sketchfab. I really need to know if I can make Sketchfab come up in VR mode using IFRAME.

I know it can be done using EMBED, but as far as I can tell I don't have access to the scripting mechanism that I get using an IFRAME.

So once again, can this code be modified such that on a mobile device the browser goes directly into Cardboard mode?

<iframe src="" id="api-frame" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" width="1024px" height="548px" style="border: 0px;"></iframe>
    
<!-- Initialize the viewer -->
<script type="text/javascript">
var iframe = document.getElementById( 'api-frame' );
var version = '1.0.0';
var urlid = '311d052a9f034ba8bce55a1a8296b6f9';
var client = new Sketchfab( version, iframe );

client.init( urlid, {
    success: function onSuccess( api ){
        api.start();
        api.addEventListener( 'viewerready', function() {

            // API is ready to use
            // Insert your code here
            console.log( 'Viewer is ready' );

        } );
    },
    error: function onError() {
        console.log( 'Viewer error' );
    }
} );
</script>

split this topic #10

3 posts were merged into an existing topic: Start IFRAME in VR Mode


closed #11

(Glasshandvr) #12

Good News, IFRAME loads in VR Cardboard Mode, but the camera is fixed on the stereo image, when I move the device nothing happens. I have zero problems in EMBED mode or if I select Cardboard using the menu button otherwise.

Here's the code:

<iframe src="" id="api-frame" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" width="1032px" height="548px" style="border: 0px;"></iframe>
    
<!-- Initialize the viewer -->
<script type="text/javascript">
var iframe = document.getElementById( 'api-frame' );
var version = '1.0.0';
var urlid = '311d052a9f034ba8bce55a1a8296b6f9';
var client = new Sketchfab( version, iframe );

client.init( urlid, {
cardboard: 1,
    success: function onSuccess( api ){
        api.start();
        api.addEventListener( 'viewerready', function() {

            // API is ready to use
            // Insert your code here
            console.log( 'Viewer is ready' );

        } );
    },
    error: function onError() {
        console.log( 'Viewer error' );
    }
} );
</script>

#13

@mauricesvay Maybe a browser limitation of accessing the gyro from an iframe?


(Glasshandvr) #14

Works fine when I manually access the Cardboard setting.

If I manually enter Cardboard (or use Embed) the camera in the Van Gough scene is pointed at the floor and works just fine when I move the device.

But if I programmatically load in Cardboard mode, the room loads but freezes and no longer "hears" the gyro.


(Mauricesvay) #15

@glasshandvr @james as far as I know, Safari is not allowing device motion and device orientation in iframes from a different origin. From what I understand, the API could be exploited to track sensitive information. I've already reported the issue to Apple, but they don't plan to change this behavior.

Here is a link to the iOS security update that introduced this limitation: https://support.apple.com/en-us/HT206166

Right now, there's not much we can do about it :frowning2:


(Glasshandvr) #16

Okey Doke.

The approach that is affected by the Apple limitation is where I load a URL to an HTML page into an iOS UIWebViewer like so, with the manipulation of the object occurring via JavaScript in the page.

let urlString : String = "http://www.glasshandvr.com/vr/sketchfab/sketchfab5.html"

...
JavaScript blah
...

Instead, I'm going back to using an EMBED URL:

let urlString : String = "https://sketchfab.com/models/311d052a9f034ba8bce55a1a8296b6f9/embed?cardboard=1&autostart=1"

I can inject JavaScript into the WebContainer (self.myWebView.delegate = self), but what statements might work? Maybe try spinning the model so the effect is apparent if it works?


(Andras Besenyei) #17

@glasshandvr @james @mauricesvay I reported this issue for you guys back in January:

As mauricesvay mentioned, Apple blockss reading out deviceorientation from a cross-origin iframe.
Solution: You should read out directly the devicemotion with javascript, and pass the values to the API as an input to modify the scene rotation --> You should provide a port in your API to recieve such data.

I know its a workaround, but since december 2015, there is no possible way to develop anything to iOS with Sketchfab API (Not only Safari, but Chrome and Firefox also use WebKit in Apple products).
You have an awesome product, full with amazing features, but I had to switch to A-Frame/Three.JS to make a VR-scene available in an iOS device.


(Glasshandvr) #18

Please post the code how to do that. In fact any example of how to interact with the model in real time using HTML/JavaScript would be helpful.