# WebXR

# Workflow

three-elements makes it easy to get started with WebXR.

You will need to enable autorender on your <three-game> tag, and also supply a custom renderer that is preconfigured for XR:

<three-game id="game" autorender>
  <!-- custom renderer with XR enabled -->
  <three-web-gl-renderer xr.enabled></three-web-gl-renderer>

  <three-scene background-color="#808080">
    <three-ambient-light intensity="1.2"></three-ambient-light>

    <three-mesh scale="4" rotation.x="-90deg">
      <three-plane-buffer-geometry></three-plane-buffer-geometry>
      <three-mesh-standard-material
        color="#eeeeee"
      ></three-mesh-standard-material>
    </three-mesh>
  </three-scene>
</three-game>

Now that your app renders in XR, you have to create a way for users to step into a WebXR session. Luckily, Three.js provides an VR button that can be added to your scene.

Simply import the button from Three.js and target your app's renderer. (HTML elements with DOM IDs automatically become available as properties on the window object, which allows us to directly refer to game in this example.)

import { VRButton } from "three/examples/jsm/webxr/VRButton.js"

const button = VRButton.createButton(game.renderer)
document.body.appendChild(button)

Alternatively, you can create your own XR button through navigator.xr.requestSession().

const optionalFeatures = ["local-floor", "bounded-floor", "hand-tracking"]

const button = document.createElement("button")
button.onclick = navigator.xr.requestSession("immersive-vr", {
  optionalFeatures
})
document.body.appendChild(button)

# Configuring AR

You can configure AR by using Three.js's ARButton and/or changing XRSessionMode to immersive-ar on custom buttons.

# Events

TODO

# Controllers

TODO

# Hand-tracking

TODO