Translations: Japanese

Enabling VR for Three.js

import { VRButton } from "three/examples/jsm/webxr/VRButton.js";

...

if (withVR) {
  if ("xr" in navigator) {
    navigator.xr
      .isSessionSupported("immersive-vr")
      .then(function (supported) {
        if (supported) {
          renderer.xr.enabled = true;

          document.addEventListener("keydown", function (e) {
            if (e.key === "Escape") {
              if (renderer.xr.isPresenting) {
                renderer.xr.getSession()?.end();
              }
            }
          });
          const vrButton = VRButton.createButton(renderer);
          document.body.appendChild(vrButton);
        }
      });
  } else {
    if (window.isSecureContext === false) {
      console.warn("webxr needs https");
    } else {
      console.warn("webxr not available");
    }
  }
}
Last Updated: