WebXR in a browser that blocks it
Measured in this preview. On your own HTTPS page with a headset, the support line says true and the button ENTER VR.
WebXR lets a page show the scene in a headset or on a phone camera. It needs HTTPS, a user gesture and a supported device. three.js provides the button and the per-eye drawing; this preview blocks it, and the example shows exactly what that looks like.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write the lines that show an "Enter VR" button only when VR is supported, and otherwise nothing.
Write the click handler that starts an immersive VR session and handles a refusal.
Explain it without notes
What three things does a page need before it can enter immersive VR?
Why must you use renderer.setAnimationLoop and not requestAnimationFrame for XR?
Console
Nothing logged yet.Expected console output
secure context (HTTPS or localhost): true
navigator.xr exists: true
immersive-vr supported: error: SecurityError
Exception when trying to call xr.isSessionSupported SecurityError: Failed to execute 'isSessionSupported' on 'XRSystem': Access to the feature "xr" is disallowed by permissions policy.
button text: VR NOT ALLOWED | disabled: false