v3.6.0

What's Changed

• feat: create AR/VR buttons in react, bypass context for session init by @CodyJasonBennett, @bbohlender in #142
• fix: rollup => vite, cleanup peer deps and use cjs target by @CodyJasonBennett in #134
• fix: downlevel transpile, use correct node exts by @CodyJasonBennett in #138
• fix(HandModel): fix circular reference on dispose by @CodyJasonBennett in #139
• chore: fix markdown demo links for github by @rvdende in #137
• fix(InteractionManager): don't pass stale state on filter by @CodyJasonBennett in #144
• fix: don't create matrices on useframe, re-use hitmatrix by @CodyJasonBennett in #145

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

• @bbohlender made their first contribution in #76
• @rvdende made their first contribution in #137

Full Changelog: v3.5.0...v3.6.0

v3.5.0

What's Changed

• fix(webxr): import three-stdlib from flatbundle for cjs targets by @CodyJasonBennett in #119
• fix(AR/VRCanvas): cleanup button on unmount by @CodyJasonBennett in #127

Full Changelog: v3.4.0...v3.5.0

v3.4.0

What's Changed

• fix(#93) entering vr will not overwrite the xr session feature list anymore by @Kalkut in #94
• Fix prepare and pack scripts by @saitonakamura in #92
• Used 'supports webxr' for babel preset env by @saitonakamura in #95
• Import GLTFLoader from three-stdlib by @marlon360 in #102
• Added console warning when XR context isn't initialized by @saitonakamura in #82
• Added intersection field to handlers other than hover/blue by @saitonakamura in #84
• chore(examples): CRA => Vite, update deps by @CodyJasonBennett in #107
• fix(XRControllerModelFactory): vendor motion controller dep by @CodyJasonBennett in #111
• feat(XRIntersectionEvent): filter event candidates via state.raycaster or stop on first hit by @CodyJasonBennett in #113
• fix(useXRFrame): correctly react to session state changes by @CodyJasonBennett in #114
• chore(useXRFrame): add deprecation notice for v8 by @CodyJasonBennett in #115
• fix(webxr): add dispose methods, cleanup hands on src change by @CodyJasonBennett in #116
• chore: setup GitHub Actions CI by @CodyJasonBennett in #117

New Contributors

• @Kalkut made their first contribution in #94
• @saitonakamura made their first contribution in #92
• @marlon360 made their first contribution in #102

Full Changelog: v3.2.0...v3.4.0

v3.3.0

What's Changed

• fix(#93) entering vr will not overwrite the xr session feature list anymore by @Kalkut in #94
• Fix prepare and pack scripts by @saitonakamura in #92
• Used 'supports webxr' for babel preset env by @saitonakamura in #95
• Import GLTFLoader from three-stdlib by @marlon360 in #102
• Added console warning when XR context isn't initialized by @saitonakamura in #82
• Added intersection field to handlers other than hover/blue by @saitonakamura in #84
• chore(examples): CRA => Vite, update deps by @CodyJasonBennett in #107

New Contributors

• @Kalkut made their first contribution in #94
• @saitonakamura made their first contribution in #92
• @marlon360 made their first contribution in #102

Full Changelog: v3.2.0...v3.3.0

v3.1.0

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

v2.0.2

• Add useXRFrame hook by @ThomasRutzer

v2.0.1

• fix useHitTest hook to work with latest threejs version

v2.0.0

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

v1.1.0

• Added useController hook
• Reworked how controllers are loaded, now controllers are available only when inputSource is present
• Handled 'disconnect' event for the controller
• Added experimental Hands component
• Added 'examples/' folder

v1.0.6

• Removed XRCanvas
• Added VRCanvas and ARCanvas for VR and AR modes respectively