r3f-xr-widgets / EquirectPlayer

Function: EquirectPlayer()

EquirectPlayer(props): Element

Defined in: src/components/EquirectPlayer.tsx:108

360-degree equirectangular video player with XR controls

Renders a 360/180-degree video using XRLayer for optimal performance in VR/AR. Includes a floating control panel with play/pause, volume, scrubbing, and visual playback indicators.

The video is rendered as an equirectangular projection (sphere mapping) and supports both stereoscopic (side-by-side, top-bottom) and monoscopic layouts.

Parameters

props

EquirectPlayerProps

Returns

Element

Examples

import { EquirectPlayer } from 'r3f-xr-widgets'

<EquirectPlayer
  title="My 360 Video"
  videoUrl="/videos/360-video.mp4"
  videoAngle={360}
  layout="mono"
/>

<EquirectPlayer
  title="VR180 Experience"
  videoUrl="/videos/vr180.mp4"
  videoAngle={180}
  layout="stereo-left-right"
/>

See

useVideoXRControls for the XR controls hook used internally