Three.js VRButton

Hello,

I was experimenting using Three.js for VR (XR), and I was hoping to hook things up in Observable as well. When following the directions at https://threejs.org/docs/#manual/en/introduction/How-to-create-VR-content

I could get it running offline, but when I run within Observable, I get the following error:

Failed to execute ‘isSessionSupported’ on ‘XR’: Access to the feature “xr” is disallowed by feature policy.

Note: my imports are as follows

THREE = require("three")
VRButton = (await import(await FileAttachment("VRButton.js").url())).VRButton

I assume that this feature may just be blocked, but I was hoping that there was a chance that if I import differently, maybe it would be possible to load… I haven’t read up on feature policies yet. Thanks in advance.

I’m not sure if this is helpful, but maybe importing the addon from the same source would work? I see you’re using the VRButton from file attachments and Three.js from npm. You could try

    THREE = require(“three”)
    VRButton = (await import('three/examples/jsm/webxr/VRButton.js')).VRButton;

edit:
I just test it, probably another issue, I’m sorry, don’t have a VR headset :frowning:
here is the exception on my browser.

      navigator.xr.isSessionSupported('immersive-vr').then(function (supported) {

        supported ? showEnterVR() : showWebXRNotFound();

      }); 
1 Like

Thanks for the suggestion for the improved import. Unfortunately that is the same error that I am running into.

There is an initial warning:

index-5f07b446.js:7 Unrecognized feature: 'vr'.

And then the actual error message…

DOMException: Failed to execute 'isSessionSupported' on 'XR': Access to the feature "xr" is disallowed by feature policy.
    at Object.createButton (https://unpkg.com/three@0.116.1/examples/jsm/webxr/VRButton.js?module:134:20)

On circumvention:
You might be able to find an extension or command line flag to disable content security policies in the browser for testing purposes, though I’d say be careful with that obviously.

Looks like Observables iframes currently allow: geolocation; microphone; camera; midi; encrypted-media; autoplay; accelerometer; magnetometer; gyroscope; vr

However you seem to need this experimental one:

1 Like