xr

🤳 VR/AR for react-three-fiber

OTHER License

Downloads
35.6K
Stars
2K
Committers
8
View Code on GitHub Visit Website View on X
Ecosystems: WebXR, Zustand, React

Bot releases are hidden (Show)

xr - v4.1.8

Published by CodyJasonBennett about 2 years ago

What's Changed

Full Changelog: https://github.com/pmndrs/react-xr/compare/v4.1.7...v4.1.8

xr - v3.6.7

Published by CodyJasonBennett about 2 years ago

What's Changed

Full Changelog: https://github.com/pmndrs/react-xr/compare/v3.6.6...v3.6.7

xr - v5.0.2

Published by CodyJasonBennett about 2 years ago

What's Changed

New Contributors

Full Changelog: https://github.com/pmndrs/react-xr/compare/v5.0.1...v5.0.2

xr - v4.1.7

Published by CodyJasonBennett about 2 years ago

What's Changed

  • [v4] fix: fixed outdated callbacks by @CodyJasonBennett in #189

Full Changelog: https://github.com/pmndrs/react-xr/compare/v4.1.5...v4.1.7

xr - v5.0.1

Published by CodyJasonBennett about 2 years ago

What's Changed

Full Changelog: https://github.com/pmndrs/react-xr/compare/v5.0.0...v5.0.1

xr - v5.0.0

Published by CodyJasonBennett about 2 years ago

What's Changed

Changes

This release modularizes some internals into standalone components.

DefaultControllers => Controllers

<DefaultControllers /> is renamed to <Controllers /> for consistency (see Controllers).

XRCanvas is removed for a general XR provider

The internal <XRCanvas /> component is removed in favor of a separate <XR /> provider (see XR).

<XRButton mode="VR" />
<XRCanvas>
  // ...
</XRCanvas>

// is now

<XRButton mode="VR" />
<Canvas>
  <XR>
    // ...
  </XR>
</Canvas>

ARCanvas and VRCanvas are removed for ARButton and VRButton

<ARCanvas /> and <VRCanvas /> are removed with their preset session settings moved to <ARButton /> and <VRButton /> (see XRButton).

<VRCanvas>
  // ...
</VRCanvas>

// is now

<VRButton />
<Canvas>
  <XR>
    // ...
  </XR>
</Canvas>

Full Changelog: https://github.com/pmndrs/react-xr/compare/v4.1.4...v5.0.0

xr - v4.1.4

Published by CodyJasonBennett about 2 years ago

What's Changed

Full Changelog: https://github.com/pmndrs/react-xr/compare/v4.1.2...v4.1.4

xr - v4.1.2

Published by CodyJasonBennett about 2 years ago

What's Changed

Full Changelog: https://github.com/pmndrs/react-xr/compare/v4.1.1...v4.1.2

xr - v4.1.1

Published by CodyJasonBennett about 2 years ago

What's Changed

Full Changelog: https://github.com/pmndrs/react-xr/compare/v4.1.0...v4.1.1

xr - v4.1.0

Published by CodyJasonBennett about 2 years ago

What's Changed

Full Changelog: https://github.com/pmndrs/react-xr/compare/v4.0.1...v4.1.0

xr - v4.0.1

Published by CodyJasonBennett over 2 years ago

What's Changed

Full Changelog: https://github.com/pmndrs/react-xr/compare/v4.0.0...v4.0.1

xr - v4.0.0

Published by CodyJasonBennett over 2 years ago

What's Changed

Changes

This release adds support for React 18, R3F v8, and three r141.

useXRFrame => useFrame

useXRFrame is removed in favor of R3F's useFrame.

-useXRFrame((time: DOMHighResTimeStamp, frame: XRFrame) => ...)
+useFrame((state: RootState, delta: number, frame?: XRFrame) => ...)

R3F will pass an XRFrame as the third argument while in a WebXR session (see R3F migration guide).

onSelectMissed and onSelectSqueezed interaction types

onSelectMissed and onSqueezeMissed are now supported in useInteraction, and <Interactive /> components (see interactions).

This mirror's R3F's onPointerMissed et al handlers.

Improved Ray visibility

DefaultXRControllers rays are now shown by default and can be hidden on blur with the hideRaysOnBlur prop. For <Rays />, this would be hideOnBlur.

This is more inline with menu ray representations and examples like https://threejs.org/examples/#webxr_vr_dragging.

Streamlined event types

XREvent is now generic, and can wrap an XRControllerEvent, XRManagerEvent, or XRSessionEvent. XREventHandler would represent an event listener.


useXREvent('select', (event: XREvent<XRControllerEvent>) => ...)

XRButton and XRCanvas

The internal XRButton and XRCanvas are now exported with expanded configuration options for session init and XRManager settings (see Custom XRButton and XRCanvas).

Expanded XRCanvas

XRCanvas is now exported for custom canvases. It's also expanded with session configuration options and listeners.

<XRCanvas
  /**
   * Enables foveated rendering. Default is `0`
   * 0 = no foveation, full resolution
   * 1 = maximum foveation, the edges render at lower resolution
   */
  foveation={0}
  /** Type of WebXR reference space to use. Default is `local-space` */
  referenceSpace="local-space"
  /** Called as an XRSession is requested */
  onSessionStart={(event: XREvent<XRManagerEvent>) => ...}
  /** Called after an XRSession is terminated */
  onSessionEnd={(event: XREvent<XRManagerEvent>) => ...}
  /** Called when an XRSession is hidden or unfocused. */
  onVisibilityChange={(event: XREvent<XRSessionEvent>) => ...}
  /** Called when available inputsources change */
  onInputSourcesChange={(event: XREvent<XRSessionEvent>) => ...}
>
  {/* All your regular react-three-fiber elements go here */}
</XRCanvas>

Customizeable XRButton

Internal XRButton and XRCanvas were refactored to exist in React and init session state outside of XR context, so buttons can exist outside of the canvas. This is fully backward compatible with previous versions that utilize three's VRButton & ARButton.

<XRButton
  /* The type of `XRSession` to create */
  mode={'AR' | 'VR' | 'inline'}
  /**
   * `XRSession` configuration options
   * @see https://immersive-web.github.io/webxr/#feature-dependencies
   */
  sessionInit={{ optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking', 'layers'] }}
  /** Whether this button should only enter an `XRSession`. Default is `false` */
  enterOnly={false}
  /** Whether this button should only exit an `XRSession`. Default is `false` */
  exitOnly={false}
>
  {/* Can accept regular DOM children and has an optional callback with the XR button status (unsupported, exited, entered) */}
  {(status) => `WebXR ${status}`}
</XRButton>

Furthermore, XRButton can be composed with XRCanvas to smoothly integrate with your UI. For example, this would be equivalent to VRCanvas:

<XRButton mode="VR" sessionInit={{ optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking', 'layers'] }} />
<XRCanvas>
  // ...
</XRCanvas>

Full Changelog: https://github.com/pmndrs/react-xr/compare/v3.6.0...v4.0.0

xr - v3.6.0

Published by CodyJasonBennett over 2 years ago

What's Changed

Changes

We'll be releasing v4 shortly with react 18/R3F v8 support. Due to breaking changes in @types/three, r141 support will also follow in v4.

This release backports some important fixes and features for stability and performance.

XRButton and XRCanvas

The internal XRButton and XRCanvas are now exported with expanded configuration options for session init and XRManager settings (see Custom XRButton and XRCanvas).

Expanded XRCanvas

XRCanvas is now exported for custom canvases. It's also expanded with session configuration options and listeners.

<XRCanvas
  /**
   * Enables foveated rendering. Default is `0`
   * 0 = no foveation, full resolution
   * 1 = maximum foveation, the edges render at lower resolution
   */
  foveation={0}
  /** Type of WebXR reference space to use. Default is `local-space` */
  referenceSpace="local-space"
  /** Called as an XRSession is requested */
  onSessionStart={(event: XREvent<XRManagerEvent>) => ...}
  /** Called after an XRSession is terminated */
  onSessionEnd={(event: XREvent<XRManagerEvent>) => ...}
  /** Called when an XRSession is hidden or unfocused. */
  onVisibilityChange={(event: XREvent<XRSessionEvent>) => ...}
  /** Called when available inputsources change */
  onInputSourcesChange={(event: XREvent<XRSessionEvent>) => ...}
>
  {/* All your regular react-three-fiber elements go here */}
</XRCanvas>

Customizeable XRButton

Internal XRButton and XRCanvas were refactored to exist in React and init session state outside of XR context, so buttons can exist outside of the canvas. This is fully backward compatible with previous versions that utilize three's VRButton & ARButton.

<XRButton
  /* The type of `XRSession` to create */
  mode={'AR' | 'VR' | 'inline'}
  /**
   * `XRSession` configuration options
   * @see https://immersive-web.github.io/webxr/#feature-dependencies
   */
  sessionInit={{ optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking', 'layers'] }}
  /** Whether this button should only enter an `XRSession`. Default is `false` */
  enterOnly={false}
  /** Whether this button should only exit an `XRSession`. Default is `false` */
  exitOnly={false}
>
  {/* Can accept regular DOM children and has an optional callback with the XR button status (unsupported, exited, entered) */}
  {(status) => `WebXR ${status}`}
</XRButton>

Furthermore, XRButton can be composed with XRCanvas to smoothly integrate with your UI. For example, this would be equivalent to VRCanvas:

<XRButton mode="VR" sessionInit={{ optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking', 'layers'] }} />
<XRCanvas>
  // ...
</XRCanvas>

New Contributors

Full Changelog: https://github.com/pmndrs/react-xr/compare/v3.5.0...v3.6.0

xr - v3.5.0

Published by CodyJasonBennett over 2 years ago

What's Changed

Full Changelog: https://github.com/pmndrs/react-xr/compare/v3.4.0...v3.5.0

xr - v3.4.0

Published by sniok over 2 years ago

What's Changed

New Contributors

Full Changelog: https://github.com/pmndrs/react-xr/compare/v3.2.0...v3.4.0

xr - v3.3.0

Published by sniok over 2 years ago

What's Changed

New Contributors

Full Changelog: https://github.com/pmndrs/react-xr/compare/v3.2.0...v3.3.0

xr - v3.1.0

Published by sniok over 3 years ago

  • Fixed GLTFLoader bug #48
  • Updated Hands component with new oculus model
  • Breaking: removed profile prop from Hands component. Now will only load deafult hands
xr -

Published by sniok over 3 years ago

  • Add useXRFrame hook by @ThomasRutzer
xr -

Published by sniok over 3 years ago

  • fix useHitTest hook to work with latest threejs version
xr -

Published by sniok over 3 years ago

Breaking changes:

  • Hover, Select components are removed and replaced by Interactive component

Added:

  • <Interactive /> component - allows attaching event handlers to the content in the scene
  • useInteraction hook - attach events to an existing object in the scene
  • const { player, isPresenting } = useXR() - added player Group and isPresenting variables
  • useHitTest - hook to perform hit tests in AR mode
Package Rankings
Top 1.8% on Npmjs.org
Related Projects
viro

ViroReact: AR and VR using React Native

23 Mar 2017 2,234
shadergradient

Create beautiful moving gradients on Framer, Figma and React

16 Apr 2022 739
uikit

🎨 user interfaces for react-three-fiber

15 Feb 2024 1,978
react-three-fiber

🇨🇭 A React renderer for Three.js

25 Feb 2019 26,800
rn-starter

🦄 React Native Starter - Powered by cli-rn, React Navigation (v6), Expo Modules, RN UI lib, MMKV,...

23 Sep 2021 151
Front-End-Domination-Create-Anything-with-Code

Start with Front-End Journey with Sheryians Coding School (Front-End Domination: Create-Anything-...

14 Nov 2023 86
react-three-next

React Three Fiber, Threejs, Nextjs starter

06 Jan 2021 2,217
react-postprocessing

📬 postprocessing for react-three-fiber

07 May 2020 1,035
react-native-swiper

The best Swiper component for React Native.

20 Apr 2015 10,338
composer-suite

A suite of libraries for making game development with Three.js and React not only awesome, but so...

03 Jun 2022 470