v5.0.2

What's Changed

• chore: update docs that mentions VRCanvas and ARCanvas which are no longer available by @smeng9 in #184
• fix(XR): purge session cache on exit by @CodyJasonBennett in #188

New Contributors

• @smeng9 made their first contribution in #184

Full Changelog: v5.0.1...v5.0.2

v4.1.7

What's Changed

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

Full Changelog: v4.1.5...v4.1.7

v5.0.1

What's Changed

• Fixed outdated callbacks by @saitonakamura in #183

Full Changelog: v5.0.0...v5.0.1

v5.0.0

What's Changed

• feat!: XR component, ARButton/VRButton by @CodyJasonBennett in #177

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: v4.1.4...v5.0.0

v4.1.4

What's Changed

• fix: regenerate types on build by @CodyJasonBennett in #175
• fix: handle session exit from device by @CodyJasonBennett in #176

Full Changelog: v4.1.2...v4.1.4

v4.1.2

What's Changed

• fix: unbundle for webpack tree-shaking, publish sourcemaps by @CodyJasonBennett in #170

Full Changelog: v4.1.1...v4.1.2

v4.1.1

What's Changed

• fix: disable JSX transform by @CodyJasonBennett in #169

Full Changelog: v4.1.0...v4.1.1

v4.1.0

What's Changed

• feat: de-duplicate intersections for select/squeeze event handlers, add intersection field by @saitonakamura in #165
• feat: add onMove event to Interactive and useInteraction by @saitonakamura in #166

Full Changelog: v4.0.1...v4.1.0

v4.0.1

What's Changed

• fix: wrap portals in fragment by @CodyJasonBennett in #162

Full Changelog: v4.0.0...v4.0.1

v4.0.0

What's Changed

• feat!: react 18 support by @saitonakamura in #131
• feat!: use ambient WebXR types from @types/three by @CodyJasonBennett in #140
• feat!: merge contexts into Zustand store, upstream src/webxr by @CodyJasonBennett in #143
• feat!: add option to hide rays on blur (show by default) by @CodyJasonBennett in #148
• feat!: make XREvent and XREventHandler generic by @CodyJasonBennett in #146
• feat: create AR/VR buttons in react, bypass context for session init by @CodyJasonBennett, @bbohlender in #142
• feat: add onSelectMissed and onSqueezeMissed interactions by @CodyJasonBennett in #150
• refactor: break up DefaultXRControllers, manage DefaultXRControllers and Hands in R3F by @CodyJasonBennett in #147
• refactor(useHitTest): subscribe to session, cleanup source init by @CodyJasonBennett in #149
• refactor: declaratively create controller models by @CodyJasonBennett in #153
• 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
• 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
• chore: fix markdown demo links for github by @rvdende in #137

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: v3.6.0...v4.0.0