diff --git a/example/webxr/index.html b/example/webxr/index.html
new file mode 100644
index 00000000..d23103ea
--- /dev/null
+++ b/example/webxr/index.html
@@ -0,0 +1,39 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <!-- <script src="//unpkg.com/3d-force-graph"></script> -->
+  <script src="../../dist/3d-force-graph.js"></script>
+</head>
+
+<body>
+  <!-- <div id="loadingIndicator">
+    Loading...
+  </div> -->
+
+  <div id="3d-graph"></div>
+
+  <script>
+    // window.onerror = (e) => {
+    //   document.querySelector('#loadingIndicator').style.color = 'red';
+    //   document.querySelector('#loadingIndicator').innerHTML = 'Error' + e;
+    // }
+
+    // Random tree
+    const N = 300;
+    const gData = {
+      nodes: [...Array(N).keys()].map(i => ({ id: i })),
+      links: [...Array(N).keys()]
+        .filter(id => id)
+        .map(id => ({
+          source: id,
+          target: Math.round(Math.random() * (id - 1))
+        }))
+    };
+
+    const Graph = ForceGraph3D()
+      (document.getElementById('3d-graph'))
+      // .nodeColor(() => "magenta")
+        .enableWebXR(true)
+        .graphData(gData);
+  </script>
+</body>
\ No newline at end of file
diff --git a/src/3d-force-graph.js b/src/3d-force-graph.js
index d4879dfa..81a9d52b 100644
--- a/src/3d-force-graph.js
+++ b/src/3d-force-graph.js
@@ -5,6 +5,7 @@ const three = window.THREE
   : { AmbientLight, DirectionalLight, Vector3 };
 
 import { DragControls as ThreeDragControls } from 'three/examples/jsm/controls/DragControls.js';
+import { XRButton as ThreeXRButton } from 'three/addons/webxr/XRButton.js';
 
 import ThreeForceGraph from 'three-forcegraph';
 import ThreeRenderObjects from 'three-render-objects';
@@ -124,6 +125,7 @@ export default Kapsule({
       triggerUpdate: false
     },
     enableNodeDrag: { default: true, triggerUpdate: false },
+    enableWebXR: { default: true, triggerUpdate: false },
     onNodeDrag: { default: () => {}, triggerUpdate: false },
     onNodeDragEnd: { default: () => {}, triggerUpdate: false },
     onNodeClick: { triggerUpdate: false },
@@ -148,20 +150,15 @@ export default Kapsule({
       return this;
     },
     pauseAnimation: function(state) {
-      if (state.animationFrameRequestId !== null) {
-        cancelAnimationFrame(state.animationFrameRequestId);
-        state.animationFrameRequestId = null;
-      }
+      this.renderer().setAnimationLoop(null);
       return this;
     },
 
     resumeAnimation: function(state) {
-      if (state.animationFrameRequestId === null) {
-        this._animationCycle();
-      }
+      this.renderer().setAnimationLoop(this._render);
       return this;
     },
-    _animationCycle(state) {
+    _render(state) {
       if (state.enablePointerInteraction) {
         // reset canvas cursor (override dragControls cursor)
         this.renderer().domElement.style.cursor = null;
@@ -170,7 +167,6 @@ export default Kapsule({
       // Frame cycle
       state.forceGraph.tickFrame();
       state.renderObjs.tick();
-      state.animationFrameRequestId = requestAnimationFrame(this._animationCycle);
     },
     scene: state => state.renderObjs.scene(), // Expose scene
     camera: state => state.renderObjs.camera(), // Expose camera
@@ -420,8 +416,14 @@ export default Kapsule({
 
     //
 
+    // config WebXR
+    if (state.enableWebXR) {
+      document.body.appendChild( ThreeXRButton.createButton( renderer ) );
+      renderer.xr.enabled = true;
+    }
+
     // Kick-off renderer
-    this._animationCycle();
+    this.renderer().setAnimationLoop(this._render);
   }
 });
 
