hmans · hmans · Jan 18, 2021 · Jan 18, 2021 · Jan 18, 2021 · Jan 18, 2021
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+- **Changed:** The core ticker loop now makes use of `setAnimationLoop` instead of `requestAnimationFrame`, which is a critical prerequisite for making your three-elements project [WebXR-ready](https://threejs.org/docs/#manual/en/introduction/How-to-create-VR-content).
+
 ## [0.2.0] - 2021-01-18
 
 - **New:** Elements now emit `connected`, `ready` and `disconnected` lifecycle events that bubble up the DOM tree.

diff --git a/examples/vr.html b/examples/vr.html
@@ -0,0 +1,89 @@
+<html>
+  <head>
+    <title>VR</title>
+    <link rel="stylesheet" href="/styles.css" />
+    <script type="module" src="https://jspm.dev/es-module-shims"></script>
+  </head>
+  <body>
+    <three-game autorender id="game">
+      <three-scene background-color="#ffe" id="mainScene">
+        <!-- Lights -->
+        <three-ambient-light intensity="0.2"></three-ambient-light>
+        <three-directional-light
+          intensity="0.8"
+          position="10, 40, 50"
+          cast-shadow
+        ></three-directional-light>
+
+        <three-orbit-controls></three-orbit-controls>
+
+        <!-- Scene Contents -->
+        <three-mesh rotation="[-1.5707, 0, 0]" position.y="-8" receive-shadow>
+          <three-plane-buffer-geometry args="[1000, 1000]"></three-plane-buffer-geometry>
+          <three-mesh-standard-material color="#ccc"></three-mesh-standard-material>
+        </three-mesh>
+
+        <three-mesh scale="2.5" receive-shadow cast-shadow>
+          <three-dodecahedron-buffer-geometry></three-dodecahedron-buffer-geometry>
+          <three-mesh-standard-material color="hotpink"></three-mesh-standard-material>
+        </three-mesh>
+      </three-scene>
+    </three-game>
+
+    <!-- Import dependencies via ESM. The future is now! -->
+    <script type="module">
+      import { VRButton } from "https://cdn.skypack.dev/three/examples/jsm/webxr/VRButton.js"
+      import { XRControllerModelFactory } from "https://cdn.skypack.dev/three/examples/jsm/webxr/XRControllerModelFactory.js"
+      import { XRHandModelFactory } from "https://cdn.skypack.dev/three/examples/jsm/webxr/XRHandModelFactory.js"
+
+      importShim("/dist/index.esm.js").then(() => {
+        /* Fetch renderer and scene */
+        const renderer = game.renderer
+        const scene = mainScene.object
+
+        /* Tell the renderer that we want XR */
+        renderer.xr.enabled = true
+
+        /* Add the VR button */
+        document.body.appendChild(VRButton.createButton(game.renderer))
+
+        /* Add controllers */
+        const controller1 = renderer.xr.getController(0)
+        scene.add(controller1)
+        const controller2 = renderer.xr.getController(1)
+        scene.add(controller2)
+
+        /* Create controller and hand models */
+        const controllerModelFactory = new XRControllerModelFactory()
+        const handModelFactory = new XRHandModelFactory()
+
+        /* Add Joysticks */
+        const controllerGrip1 = renderer.xr.getControllerGrip(0)
+        controllerGrip1.add(controllerModelFactory.createControllerModel(controllerGrip1))
+        scene.add(controllerGrip1)
+
+        const controllerGrip2 = renderer.xr.getControllerGrip(1)
+        controllerGrip2.add(controllerModelFactory.createControllerModel(controllerGrip2))
+        scene.add(controllerGrip2)
+
+        /* Add hands */
+        const hand1 = renderer.xr.getHand(0)
+        hand1.add(handModelFactory.createHandModel(hand1))
+        scene.add(hand1)
+
+        const hand2 = renderer.xr.getHand(1)
+        hand2.add(handModelFactory.createHandModel(hand2))
+        scene.add(hand2)
+      })
+    </script>
+    <script type="importmap-shim">
+      {
+        "imports": {
+          "eventemitter3": "https://cdn.skypack.dev/eventemitter3",
+          "three": "https://cdn.skypack.dev/three",
+          "three/": "https://cdn.skypack.dev/three/"
+        }
+      }
+    </script>
+  </body>
+</html>
diff --git a/src/elements/three-game.ts b/src/elements/three-game.ts
@@ -13,9 +13,6 @@ export class ThreeGame extends HTMLElement {
     depth: true
   })
 
-  /** Is the ticker running? */
-  private ticking = false
-
   /** The time delta since the last frame, in fractions of a second. */
   deltaTime = 0
 
@@ -125,17 +122,13 @@ export class ThreeGame extends HTMLElement {
         /* Finally, emit render event. This will trigger scenes to render. */
         dispatch("rendertick", dt)
       }
-
-      /* Loop as long as this ticker is active. */
-      if (this.ticking) requestAnimationFrame(tick)
     }
 
-    this.ticking = true
-    requestAnimationFrame(tick)
+    this.renderer.setAnimationLoop(tick)
   }
 
   stopTicking() {
-    this.ticking = false
+    this.renderer.setAnimationLoop(null)
   }
 }