Allow custom optional features for VRButton

[CodyJasonBennett]

VRButton does not allow any customization of the session like ARButton does with sessionInit.

Since VRButton's option parameter has been removed, I propose allowing users to specify sessionInit in the VRButton as well or optional features, with the addition of layers support in three.

// Configures layers with R3F (see https://threejs.org/examples/#webxr_vr_layers)
<VRCanvas sessionInit={{ optionalFeatures: [ 'local-floor', 'bounded-floor', 'hand-tracking', 'layers' ] }} />

[andrew-luhring]

I am 100% an idiot, but how in the actual hell did you actually import VRButton?
Chrome says:

Uncaught SyntaxError: The requested module 'https://cdn.skypack.dev/@react-three/xr' does not provide an export named 'VRButton'

when I try:

import { VRCanvas, VRButton} from 'https://cdn.skypack.dev/@react-three/xr'

I've also tried stuff like

import {VRButton} from 'https://cdn.skypack.dev/@react-three/xr/webxr'
// and
import {VRButton} from ''https://cdn.skypack.dev/@react-three/xr/webxr/VRButton'

and none of that works either.

... actually... is there a page somewhere that lists where to import everything from everything? I've crawled all over this rep and the docs website and I'm lost.

[CodyJasonBennett]

@andrew-luhring, it's imported privately (and later bundled without export) in src/XR.tsx to create bindings for VRCanvas and ARCanvas.

// Configures layers with R3F (see https://threejs.org/examples/#webxr_vr_layers)
<VRCanvas sessionInit={{ optionalFeatures: [ 'local-floor', 'bounded-floor', 'hand-tracking', 'layers' ] }} />

I don't believe it's intended to be exported separately (as this is a react-focused lib), but you can try changing the path there to @react-three/xr/src/webxr/VRButton.js.

import { VRButton } from '@react-three/xr/src/webxr/VRButton.js'

Exports would be:

@react-three/xr
  ├── ARCanvas
  ├── DefaultXRControllers
  ├── Hands
  ├── InteractionManager
  ├── InteractionsContext
  ├── Interactive
  ├── RayGrab
  ├── VRCanvas
  ├── XR
  ├── XRController
  ├── useController
  ├── useHitTest
  ├── useInteraction
  ├── useXR
  ├── useXREvent
  └── useXRFrame

[andrew-luhring]

Turns out if you use VRCanvas or ARCanvas, they automatically add buttons for you- BUT if you are using react router or something similar and navigate away from the page, the button gets recreated each time you navigate back; i opened a pull request that should fix that behavior but yeah... kinda annoying that you can't at least specify where/how it looks