WebXR VR App - React Three Fiber + Viverse

A complete WebXR immersive VR application using the Viverse framework with the new @react-three/xr v6 Store API.

Features

✨ Complete VR Setup using the new v6 API with createXRStore, <XR>, and <XROrigin> components

✨ SimpleCharacter Avatar - Player avatar in first-person perspective (model hidden in VR)

✨ Snap Rotation - Comfortable VR navigation using right thumbstick for 45-degree rotation increments

✨ Immersive Environment - Sky, lighting, and interactive objects in the VR scene

✨ TypeScript Support - Full type safety across the codebase

Project Structure

src/
├── main.tsx          # React entry point
├── App.tsx           # Main app component with XR store setup
└── Scene.tsx         # VR scene with SimpleCharacter and environment

Key Components

App.tsx

• Sets up the XR store with createXRStore({ offerSession: 'immersive-vr' })
• Wraps the scene with <XR> component
• Configures Canvas for WebXR

Scene.tsx

• Sky Component - Provides VR sky background
• SimpleCharacter - Player avatar with:
  • cameraBehavior={false} - Disables auto camera control
  • model={false} - Hides character model for first-person VR
• SnapRotateXROrigin - Custom component for snap rotation using right thumbstick
  • XROrigin placed inside SimpleCharacter to define player position
• Example Environment - Ground plane and decorative objects

Installation

npm install

Development

npm run dev

The dev server runs on HTTPS (required for WebXR). Open the URL in a WebXR-capable browser on a VR device.

Building

npm run build

Key Viverse/WebXR Concepts

XR Store (v6 API)

const store = createXRStore({ offerSession: 'immersive-vr' })

• New v6 Store API replaces older setup patterns
• Manages VR session lifecycle

XROrigin Placement

For VR applications, <XROrigin> is placed inside SimpleCharacter:

<SimpleCharacter cameraBehavior={false} model={false}>
  <XROrigin ref={ref} />
</SimpleCharacter>

Character Settings for VR

• cameraBehavior={false} - Disables Viverse's built-in camera control (VR handles it)
• model={false} - Hides character model (first-person view)

Snap Rotation

Custom SnapRotateXROrigin component provides comfortable snap-turn navigation:

• Right thumbstick X-axis triggers 45-degree rotations
• Prevents motion sickness from continuous rotation

Resources

• Viverse Documentation
• @react-three/xr Documentation
• React Three Fiber Docs

WebXR Compatibility

This app requires:

• WebXR-capable browser
• VR headset (Meta Quest 3, HTC Vive, PlayStation VR2, etc.)
• HTTPS connection (automatic in development with vite.config.ts)

License

MIT