move.gl/ts/VRExperience.ts

move.gl is a ...

/**
 * @title VR Experience Handler
 * @notice Manages Virtual Reality scenes and interactions using WebXR.
 * @dev Provides an easy interface to setup, control, and interact with VR content.
 */
 class VRExperienceHandler {
    private xrSession: XRSession | null = null;

    constructor(private container: HTMLElement) {
        if ('xr' in navigator) {
            this.initVR();
        } else {
            console.error("WebXR not available.");
        }
    }

    private async initVR() {
        try {
            this.xrSession = await navigator.xr.requestSession('immersive-vr', {
                optionalFeatures: ['local-floor', 'bounded-floor']
            });
            this.xrSession.addEventListener('end', this.onSessionEnded);
            this.setupXRWebGLLayer();
        } catch (error) {
            console.error("Failed to create XR Session: ", error);
        }
    }

    private setupXRWebGLLayer() {
        const gl = this.container.querySelector('canvas')!.getContext('webgl2')!;
        this.xrSession!.updateRenderState({
            baseLayer: new XRWebGLLayer(this.xrSession, gl)
        });
    }

    private onSessionEnded = () => {
        console.log("VR session ended.");
        this.xrSession = null;
    }

    public startRendering() {
        if (!this.xrSession) {
            console.error("XR Session is not initialized.");
            return;
        }

        this.xrSession.requestAnimationFrame((time, frame) => this.renderFrame(time, frame));
    }

    private renderFrame(time: DOMHighResTimeStamp, frame: XRFrame) {
        const session = frame.session;
        const pose = frame.getViewerPose(xrReferenceSpace);

        if (pose) {
            // Update your scene's rendering based on user's position
        }
    }
}