diff --git a/CHANGELOG.md b/CHANGELOG.md
index 069de52..4ec4a08 100644
--- 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
new file mode 100644
index 0000000..391d08e
--- /dev/null
+++ b/examples/vr.html
@@ -0,0 +1,89 @@
+
+
+ VR
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/elements/three-game.ts b/src/elements/three-game.ts
index 8011df6..761b411 100644
--- 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)
}
}