diff --git a/ipyvolume/pylab.py b/ipyvolume/pylab.py
index ad447f1b..64f31a11 100644
--- a/ipyvolume/pylab.py
+++ b/ipyvolume/pylab.py
@@ -1803,11 +1803,11 @@ def light_hemisphere(
 def light_directional(
         light_color=default_color_selected,
         intensity=1,
-        position=[10, 10, 10],
+        position=[2, 2, 2],
         target=[0, 0, 0],
         near=0.1,
-        far=100,
-        shadow_camera_orthographic_size=10,
+        far=5,
+        shadow_camera_orthographic_size=3,
         cast_shadow=True):
     """Create a new Directional Light
 
diff --git a/ipyvolume/server.py b/ipyvolume/server.py
new file mode 100644
index 00000000..e75f2a29
--- /dev/null
+++ b/ipyvolume/server.py
@@ -0,0 +1,17 @@
+import sys
+import os
+from http.server import HTTPServer, SimpleHTTPRequestHandler
+import ssl
+
+
+def main(args=sys.argv):
+    os.system("openssl req -nodes -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -subj '/CN=mylocalhost'")
+    port = 443
+    httpd = HTTPServer(('0.0.0.0', port), SimpleHTTPRequestHandler)
+    httpd.socket = ssl.wrap_socket(httpd.socket, keyfile='key.pem', certfile="cert.pem", server_side=True)
+    print(f"Server running on https://0.0.0.0:{port}")
+    httpd.serve_forever()
+
+
+if __name__ == "__main__":
+    main()
diff --git a/ipyvolume/styles.py b/ipyvolume/styles.py
index c199b821..1279300d 100644
--- a/ipyvolume/styles.py
+++ b/ipyvolume/styles.py
@@ -3,6 +3,7 @@
 Possible properies
 
  * background-color
+ * background-opacity
  * axes
   * color
   * visible
@@ -31,6 +32,7 @@
 
 styles = {}
 _defaults = {
+    'background-opacity': 1.0,
     'axes': {'visible': True, 'label': {'color': 'black'}, 'ticklabel': {'color': 'black'}},
     'box': {'visible': True},
 }
@@ -73,6 +75,13 @@ def create(name, properties):
 minimal = {'box': {'visible': False}, 'axes': {'visible': False}}
 nobox = create("nobox", {'box': {'visible': False}, 'axes': {'visible': True}})
 
+_ar = {
+    'background-color': '#000001',  # for some reason we cannot set it to black!?!
+    'background-opacity': 0,
+}
+utils.dict_deep_update(_ar, minimal)
+ar = create("ar", _ar)
+
 if __name__ == "__main__":
     source = __file__
     dest = os.path.join(os.path.dirname(source), "../js/data/style.json")
diff --git a/ipyvolume/ui.py b/ipyvolume/ui.py
index 0ab6799e..87ea7332 100644
--- a/ipyvolume/ui.py
+++ b/ipyvolume/ui.py
@@ -25,6 +25,7 @@ class Container(v.VuetifyTemplate):
     children = traitlets.List().tag(sync=True, **widgets.widget_serialization)
     models = traitlets.Any({'figure': {}}).tag(sync=True)
     panels = traitlets.List(traitlets.CInt(), default_value=[0, 1, 2]).tag(sync=True)
+    ar_supported = traitlets.Bool(False).tag(sync=True)
 
 
 class Popup(v.VuetifyTemplate):
diff --git a/ipyvolume/vue/container.vue b/ipyvolume/vue/container.vue
index f31f517f..175fbc4f 100644
--- a/ipyvolume/vue/container.vue
+++ b/ipyvolume/vue/container.vue
@@ -29,6 +29,12 @@
                     </v-expansion-panel-content>
                 </v-expansion-panel>
             </v-expansion-panels>
+            <div v-if="ar_supported">
+                <v-btn @click="startAR" outlined>
+                    <v-icon left>mdi-glasses</v-icon>
+                    start ar
+                </v-btn>
+            </div>
         </div>
     </div>
 </template>
@@ -44,13 +50,17 @@
 
 <script>
     module.export = {
-        created() {
+        async created() {
             console.log('created', this.$refs)
+            if ('xr' in navigator) {
+                const supported = await navigator.xr.isSessionSupported('immersive-ar')
+                this.ar_supported = supported;
+            }
         },
         mounted() {
             const figureComponent = this.$refs.figure;
             (async () => {
-                const figure = await this.viewCtx.getModelById(this.figure.substr(10));
+                const figure = await this.figureModel;
                 function bbproxy(model, attrs, widgetAttrs) {
                     const proxy = {}
 
@@ -109,7 +119,18 @@
                 this.$set(this.models, 'figure', bbproxy(figure, ["show"]));
             })();
         },
+        computed: {
+            figureModel() {
+                return this.viewCtx.getModelById(this.figure.substr(10))
+            }
+        },
         methods: {
+            getFigureModel() {
+                return
+            },
+            async startAR() {
+                (await this.figureModel).set('start_ar', true);
+            }
         }
     }
 
diff --git a/ipyvolume/widgets.py b/ipyvolume/widgets.py
index 6f2eb07a..1be62618 100644
--- a/ipyvolume/widgets.py
+++ b/ipyvolume/widgets.py
@@ -358,6 +358,8 @@ class Figure(ipywebrtc.MediaStream):
         pythreejs.Camera, allow_none=True, help='A :any:`pythreejs.Camera` instance to control the camera'
     ).tag(sync=True, **widgets.widget_serialization)
 
+    start_ar = traitlets.Bool(False).tag(sync=True)
+
     @traitlets.default('camera')
     def _default_camera(self):
         # see https://github.com/maartenbreddels/ipyvolume/pull/40 for an explanation
diff --git a/js/data/style.json b/js/data/style.json
index ef0364c7..eb5630e0 100644
--- a/js/data/style.json
+++ b/js/data/style.json
@@ -1,4 +1,22 @@
 {
+  "light": {
+    "background-color": "white",
+    "axes": {
+      "color": "black"
+    }
+  },
+  "dark": {
+    "background-color": "#000001",
+    "axes": {
+      "color": "white",
+      "label": {
+        "color": "white"
+      },
+      "ticklabel": {
+        "color": "white"
+      }
+    }
+  },
   "demo": {
     "background-color": "white",
     "box": {
@@ -6,73 +24,53 @@
       "visible": true
     },
     "axes": {
-      "z": {
-        "color": "#00f",
-        "ticklabel": {
-          "color": "#0f0"
-        },
-        "label": {
-          "color": "#f00"
-        }
-      },
-      "ticklabel": {
-        "color": "black"
-      },
-      "label": {
-        "color": "black"
-      },
+      "color": "black",
+      "visible": true,
       "x": {
         "color": "#f00",
-        "ticklabel": {
-          "color": "#00f"
-        },
         "label": {
           "color": "#0f0"
+        },
+        "ticklabel": {
+          "color": "#00f"
         }
       },
       "y": {
         "color": "#0f0",
-        "ticklabel": {
-          "color": "#f00"
-        },
         "label": {
           "color": "#00f"
+        },
+        "ticklabel": {
+          "color": "#f00"
         }
       },
-      "color": "black",
-      "visible": true
+      "z": {
+        "color": "#00f",
+        "label": {
+          "color": "#f00"
+        },
+        "ticklabel": {
+          "color": "#0f0"
+        }
+      }
     }
   },
-  "dark": {
-    "background-color": "black",
+  "nobox": {
     "box": {
-      "visible": true
+      "visible": false
     },
     "axes": {
-      "color": "white",
-      "ticklabel": {
-        "color": "white"
-      },
-      "visible": true,
-      "label": {
-        "color": "white"
-      }
+      "visible": true
     }
   },
-  "light": {
-    "background-color": "white",
+  "ar": {
+    "background-color": "#000001",
+    "background-opacity": 0,
     "box": {
-      "visible": true
+      "visible": false
     },
     "axes": {
-      "color": "black",
-      "ticklabel": {
-        "color": "black"
-      },
-      "visible": true,
-      "label": {
-        "color": "black"
-      }
+      "visible": false
     }
   }
 }
\ No newline at end of file
diff --git a/js/package-lock.json b/js/package-lock.json
index 6d717128..f2923ce0 100644
--- a/js/package-lock.json
+++ b/js/package-lock.json
@@ -7061,6 +7061,14 @@
         "jupyter-dataserializers": "^2.2.0",
         "three": "^0.97.0",
         "underscore": "^1.8.3"
+      },
+      "dependencies": {
+        "three": {
+          "version": "0.97.0",
+          "resolved": "https://registry.npmjs.org/three/-/three-0.97.0.tgz",
+          "integrity": "sha512-ctZF79O1R2aMIDnz9cV5GUIONyFnYvfQKg4+EAwEVaEr1mgy99rglstH6hhRdIThu3SOa4Ns5da/Ee5fTbWc9A==",
+          "dev": true
+        }
       }
     },
     "karma": {
@@ -11090,9 +11098,9 @@
       "dev": true
     },
     "three": {
-      "version": "0.97.0",
-      "resolved": "https://registry.npmjs.org/three/-/three-0.97.0.tgz",
-      "integrity": "sha512-ctZF79O1R2aMIDnz9cV5GUIONyFnYvfQKg4+EAwEVaEr1mgy99rglstH6hhRdIThu3SOa4Ns5da/Ee5fTbWc9A=="
+      "version": "0.112.1",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.112.1.tgz",
+      "integrity": "sha512-8I0O74hiYtKl3LgDNcPJbBGOlpekbcJ6fJnImmW3mFdeUFJ2H9Y3/UuUSW2sBdjrIlCM0gvOkaTEFlofO900TQ=="
     },
     "three-text2d": {
       "version": "0.4.1",
diff --git a/js/package.json b/js/package.json
index 615c2092..ae03eae9 100644
--- a/js/package.json
+++ b/js/package.json
@@ -91,7 +91,7 @@
     "ndarray-pack": "^1.2.1",
     "screenfull": "^3.3.1",
     "style-loader": "^0.18.2",
-    "three": "^0.97.0",
+    "three": "^0.112.1",
     "three-text2d": "~0.4.1",
     "tslint": "^5.20.0",
     "underscore": "^1.8.3",
diff --git a/js/src/ar.js b/js/src/ar.js
new file mode 100644
index 00000000..62f0991c
--- /dev/null
+++ b/js/src/ar.js
@@ -0,0 +1,106 @@
+export const closeOverlay = document.createElement("div");
+closeOverlay.style.display = "none";
+document.body.appendChild(closeOverlay);
+
+let onClose = () => console.log("onClose not set");
+
+const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+svg.setAttribute("width", 38);
+svg.setAttribute("height", 38);
+svg.style.position = "absolute";
+svg.style.right = "20px";
+svg.style.top = "20px";
+svg.addEventListener("click", () => onClose());
+closeOverlay.appendChild(svg);
+
+const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+path.setAttribute("d", "M 12,12 L 28,28 M 28,12 12,28");
+path.setAttribute("stroke", "#fff");
+path.setAttribute("stroke-width", 2);
+svg.appendChild(path);
+
+function setOnClose(fn) {
+    onClose = fn;
+}
+
+function showCloseOverlay(value) {
+    closeOverlay.style.display = value ? "" : "none";
+}
+
+let lastXrTransform = null;
+let lastWidth = null;
+let lastHeight = null;
+
+export function createController(renderer, scene, onSelect) {
+    const arController = renderer.xr.getController(0);
+    arController.addEventListener("select", () => onSelect(lastXrTransform));
+    scene.add(arController);
+    return arController;
+}
+
+export async function start(renderer, renderFn, onStop) {
+    if (renderer.xr.getSession() !== null) {
+        return;
+    }
+    renderer.xr.enabled = true;
+
+    const sessionInit = {
+        optionalFeatures: ["dom-overlay", "hit-test"],
+        domOverlay: { root: closeOverlay }
+    };
+
+    showCloseOverlay(true);
+
+    const session = await navigator.xr.requestSession("immersive-ar", sessionInit);
+    renderer.xr.setReferenceSpaceType("local");
+    renderer.xr.setSession(session);
+    const { x, y } = renderer.getSize();
+    lastWidth = x;
+    lastHeight = y;
+    renderer.setSize(window.innerWidth, window.innerHeight);
+
+    lastXrTransform = null;
+
+    renderer.setAnimationLoop(
+        await extractHitTransform(
+            renderer,
+            renderFn,
+            (xrTransform) => { lastXrTransform = xrTransform; }));
+
+    setOnClose(onStop);
+}
+
+export function stop(renderer) {
+    if (renderer.xr.getSession() === null) {
+        return;
+    }
+    renderer.xr.getSession().end();
+    renderer.xr.setSession(null);
+    lastXrTransform = null;
+    showCloseOverlay(false);
+    renderer.setAnimationLoop(null);
+    renderer.setSize(lastWidth, lastHeight);
+}
+
+async function extractHitTransform(renderer, renderFn, onXrTransformChange) {
+    const session = renderer.xr.getSession();
+    const referenceSpace = await session.requestReferenceSpace("viewer");
+    const hitTestSource = await session.requestHitTestSource({ space: referenceSpace });
+
+    return (time, frame) => {
+        if (frame) {
+            // based on https://threejs.org/examples/webxr_ar_hittest.html
+            const referenceSpace = renderer.xr.getReferenceSpace();
+
+            if (hitTestSource) {
+                const hitTestResults = frame.getHitTestResults(hitTestSource);
+                if (hitTestResults.length) {
+                    const hit = hitTestResults[0];
+                    const pose = hit.getPose(referenceSpace);
+                    onXrTransformChange(pose.transform);
+                }
+            }
+        }
+        renderFn(time, frame);
+    };
+}
diff --git a/js/src/figure.ts b/js/src/figure.ts
index e5a4765f..c86901b3 100644
--- a/js/src/figure.ts
+++ b/js/src/figure.ts
@@ -32,6 +32,7 @@ import "./three/OrbitControls.js";
 import "./three/StereoEffect.js";
 import "./three/THREEx.FullScreen.js";
 import "./three/TrackballControls.js";
+import * as ar from "./ar";
 
 const shaders = {
     "screen-fragment": (require("raw-loader!../glsl/screen-fragment.glsl") as any).default,
@@ -103,6 +104,18 @@ class ToolIconDropdown {
     }
 }
 
+const arStyle = {
+    "background-opacity": 0,
+    "axes": {
+        "visible": false,
+        "label": {"color": "black"},
+        "ticklabel": {"color": "black"},
+        "color": "black"
+    },
+    "box": {"visible": false},
+    "background-color": "#000001"
+};
+
 export
 class FigureModel extends widgets.DOMWidgetModel {
 
@@ -260,6 +273,8 @@ class FigureView extends widgets.DOMWidgetView {
     id_pass_target: THREE.WebGLRenderTarget;
     lastId: number;
     _wantsPopup: boolean;
+    arController: any = null;
+    arRootPositionBackup: any = null;
 
     // rendered to get the front coordinate
     front_box_mesh: THREE.Mesh;
@@ -284,6 +299,47 @@ class FigureView extends widgets.DOMWidgetView {
         return buffer;
     }
 
+    async startAR() {
+        if (this.arController === null) {
+            this.arController = ar.createController(
+                    this.renderer,
+                    this.scene,
+                    (lastXrTransform) => {
+                        if  (lastXrTransform) {
+                            // this.rootObject.matrixAutoUpdate = false;
+
+                            // this ignores the box_center/scale, but does rotation
+                            // this.rootObject.matrix.fromArray(lastXrTransform.matrix);
+                            // const matrixTrans = new THREE.Matrix4();
+                            // matrixTrans.makeTranslation(0.5, 0.5, 0.5);
+                            // this.rootObject.matrix.multiply(matrixTrans);
+
+                            const pos = lastXrTransform.position;
+                            this.model.set("box_center", [pos.x + 0.5, pos.y + 1, pos.z + 1]);
+                            this.model.save_changes();
+                        }
+                    });
+        }
+        this.arRootPositionBackup = this.model.get("box_center").concat();
+        this.model.set("box_center", [0.5, 0.5, -3]);
+        ar.start(
+                this.renderer,
+                this._real_update.bind(this),
+                this.stopAr.bind(this)
+        );
+        this.model.set("camera_control", "xr");
+        this.model.save_changes();
+    }
+
+    stopAr() {
+        ar.stop(this.renderer);
+        this.arRootPositionBackup && this.model.set("box_center", this.arRootPositionBackup);
+        this.arRootPositionBackup = null;
+        this.model.set("camera_control", "trackball")
+        this.model.set("start_ar", false);
+        this.model.save_changes();
+    }
+
     render() {
         this.transitions = [];
         this._update_requested = false;
@@ -714,6 +770,9 @@ class FigureView extends widgets.DOMWidgetView {
         // this.scene_scatter = new THREE.Scene();
         this.scene_opaque = new THREE.Scene();
 
+        this.rootObject.add(this.wire_box);
+        this.rootObject.add(this.axes);
+
         this.scene_opaque.add(this.wire_box);
         this.scene_opaque.add(this.axes);
 
@@ -909,7 +968,7 @@ class FigureView extends widgets.DOMWidgetView {
             sync_controls_external();
         });
 
-        window.addEventListener("deviceorientation", this.on_orientationchange.bind(this), false);
+        // window.addEventListener("deviceorientation", this.on_orientationchange.bind(this), false);
 
         const render_size = this.getRenderSize();
 
@@ -1137,7 +1196,17 @@ class FigureView extends widgets.DOMWidgetView {
         this.renderer.domElement.onmouseleave = () => {
             this.hover = false;
         };
+
+        this.model.get('start_ar') ? this.startAR() : this.stopAr();
+        this.model.on(
+                'change:start_ar',
+                (model, start) => start ? this.startAR() : this.stopAr());
     }
+
+    get in_ar_mode(): boolean {
+        return this.model.get("start_ar");
+    }
+
     camera_initial(camera_initial: any) {
         throw new Error("Method not implemented.");
     }
@@ -1934,7 +2003,7 @@ class FigureView extends widgets.DOMWidgetView {
             // Remove previous lights
             this.model.previous('lights').forEach(light_model => {
                 const light = light_model.obj;
-                this.scene.remove(light);
+                this.rootObject.remove(light);
             });
         }
         
@@ -1952,11 +2021,11 @@ class FigureView extends widgets.DOMWidgetView {
                 this.update();
             }
             if(light.target) {
-                this.scene.add(light.target)
+                this.rootObject.add(light.target)
             }
             light_model.on("change", on_light_change);
             light_model.on("childchange", on_light_change);
-            this.scene.add(light);
+            this.rootObject.add(light);
         });
         // if we update the lights, we need to force all materials to update/
         // see https://stackoverflow.com/questions/16879378/adding-and-removing-three-js-lights-at-run-time
@@ -2074,10 +2143,14 @@ class FigureView extends widgets.DOMWidgetView {
     }
 
     update() {
-        // requestAnimationFrame stacks, so make sure multiple update calls only lead to 1 _real_update call
-        if (!this._update_requested) {
-            this._update_requested = true;
-            requestAnimationFrame(this._real_update.bind(this));
+        if(this.in_ar_mode) {
+            // xr will render continious (via XR api), so ignore
+        } else {
+            // requestAnimationFrame stacks, so make sure multiple update calls only lead to 1 _real_update call
+            if (!this._update_requested) {
+                    this._update_requested = true;
+                    requestAnimationFrame(this._real_update.bind(this));
+            }
         }
     }
 
@@ -2099,7 +2172,7 @@ class FigureView extends widgets.DOMWidgetView {
             scatter_view.uniforms.aspect.value = this.model.get('box_size');
         }
 
-        this.renderer.setClearColor(this.get_style_color("background-color"));
+        this.renderer.setClearColor(this.get_style_color("background-color"), this.get_style("background-opacity"));
         this.x_axis.visible = this.get_style("axes.x.visible axes.visible");
         this.y_axis.visible = this.get_style("axes.y.visible axes.visible");
         this.z_axis.visible = this.get_style("axes.z.visible axes.visible");
@@ -2269,7 +2342,7 @@ class FigureView extends widgets.DOMWidgetView {
                 } else {
                     return null;
                 }
-            }, this.model.get("style"));
+            }, this.in_ar_mode ? arStyle : this.model.get("style"));
             if (value_found !== null && value[0] === null) {
                 value[0] = value_found;
             }
@@ -2357,7 +2430,7 @@ class FigureView extends widgets.DOMWidgetView {
         (this.front_box_mesh.material as THREE.ShaderMaterial).side  = THREE.FrontSide;
         this.renderer.setRenderTarget(this.volume_front_target);
         this.renderer.clear(true, true, true);
-        this.renderer.render(this.scene, camera, this.volume_front_target);
+        this.renderer.render(this.scene, camera);
         this.front_box_mesh.visible = false;
 
 
@@ -2375,7 +2448,7 @@ class FigureView extends widgets.DOMWidgetView {
             this.renderer.setRenderTarget(this.volume_back_target);
             this.renderer.clear(true, true, true);
             setVisible({volumes: true});
-            this.renderer.render(this.scene, camera, this.volume_back_target);
+            this.renderer.render(this.scene, camera);
             this.renderer.state.buffers.depth.setClear(1);
 
             // Color and depth render pass for volume rendering
@@ -2383,18 +2456,19 @@ class FigureView extends widgets.DOMWidgetView {
             this.renderer.setRenderTarget(this.geometry_depth_target);
             this.renderer.clear(true, true, true);
             setVisible({volumes: false});
-            this.renderer.render(this.scene, camera, this.geometry_depth_target);
-            this.renderer.render(this.scene_opaque, camera, this.geometry_depth_target);
+            this.renderer.render(this.scene, camera);
+            this.renderer.render(this.scene_opaque, camera);
             this.renderer.autoClear = true;
         }
 
         // Normal color pass of geometry for final screen pass
         this.renderer.autoClear = false;
-        this.renderer.setRenderTarget(this.color_pass_target);
+        // in AR mode we directly need to render to the screen
+        this.renderer.setRenderTarget(this.in_ar_mode ? null : this.color_pass_target);
         this.renderer.clear(true, true, true);
         setVisible({volumes: false});
-        this.renderer.render(this.scene, camera, this.color_pass_target);
-        this.renderer.render(this.scene_opaque, camera, this.color_pass_target);
+        this.renderer.render(this.scene, camera);
+        this.renderer.render(this.scene_opaque, camera);
         this.renderer.autoClear = true;
 
         if (has_volumes) {
@@ -2410,7 +2484,7 @@ class FigureView extends widgets.DOMWidgetView {
             this.renderer.setRenderTarget(this.color_pass_target);
             this.renderer.clear(false, true, false);
             setVisible({volumes: true});
-            this.renderer.render(this.scene, camera, this.color_pass_target);
+            this.renderer.render(this.scene, camera);
             this.renderer.autoClear = true;
             this.renderer.context.colorMask(true, true, true, true);
 
@@ -2425,7 +2499,7 @@ class FigureView extends widgets.DOMWidgetView {
             // threejs does not want to be called with all three false
             // this.renderer.clear(false, false, false);
             setVisible({volumes: true});
-            this.renderer.render(this.scene, camera, this.color_pass_target);
+            this.renderer.render(this.scene, camera);
             this.renderer.autoClear = true;
         }
 
@@ -2445,7 +2519,7 @@ class FigureView extends widgets.DOMWidgetView {
         this.renderer.setRenderTarget(this.coordinate_target);
         this.renderer.clear(true, true, true);
         setVisible({volumes: false});
-        this.renderer.render(this.scene, camera, this.coordinate_target);
+        this.renderer.render(this.scene, camera);
         this.renderer.autoClear = true;
 
         // id pass
@@ -2465,7 +2539,7 @@ class FigureView extends widgets.DOMWidgetView {
         this.renderer.setRenderTarget(this.id_pass_target);
         this.renderer.clear(true, true, true);
         setVisible({volumes: false});
-        this.renderer.render(this.scene, camera, this.id_pass_target);
+        this.renderer.render(this.scene, camera);
         this.renderer.autoClear = true;
 
         // now we render the weighted coordinate for the volumetric data
@@ -2483,7 +2557,7 @@ class FigureView extends widgets.DOMWidgetView {
             this.renderer.setRenderTarget(this.color_pass_target);
             this.renderer.clear(false, true, false);
             setVisible({volumes: true});
-            this.renderer.render(this.scene, camera, this.color_pass_target);
+            this.renderer.render(this.scene, camera);
             this.renderer.autoClear = true;
             this.renderer.context.colorMask(true, true, true, true);
 
@@ -2498,7 +2572,7 @@ class FigureView extends widgets.DOMWidgetView {
             // threejs does not want to be called with all three false
             // this.renderer.clear(false, false, false);
             setVisible({volumes: true});
-            this.renderer.render(this.scene, camera, this.coordinate_target);
+            this.renderer.render(this.scene, camera);
             this.renderer.autoClear = true;
 
         }
@@ -2513,24 +2587,26 @@ class FigureView extends widgets.DOMWidgetView {
             });
         }
 
-        if(this.model.get("show") == "Shadow") {
-            this._render_shadow();
-        } else {
-            // render to screen
-            this.screen_texture = {
-                render: this.color_pass_target,
-                front: this.volume_front_target,
-                back: this.volume_back_target,
-                // Geometry_back: this.geometry_depth_target,
-                coordinate: this.coordinate_target,
-                id: this.id_pass_target,
-            }[this.model.get("show")];
-            // TODO: remove any
-            this.screen_material.uniforms.tex.value = (this.screen_texture as any).texture;
-
-            this.renderer.setRenderTarget(null);
-            this.renderer.clear(true, true, true);
-            this.renderer.render(this.screen_scene, this.screen_camera);
+        if(!this.in_ar_mode) {
+            if(this.model.get("show") == "Shadow") {
+                this._render_shadow();
+            } else {
+                // render to screen
+                this.screen_texture = {
+                    render: this.color_pass_target,
+                    front: this.volume_front_target,
+                    back: this.volume_back_target,
+                    // Geometry_back: this.geometry_depth_target,
+                    coordinate: this.coordinate_target,
+                    id: this.id_pass_target,
+                }[this.model.get("show")];
+                // TODO: remove any
+                this.screen_material.uniforms.tex.value = (this.screen_texture as any).texture;
+
+                this.renderer.setRenderTarget(null);
+                this.renderer.clear(true, true, true);
+                this.renderer.render(this.screen_scene, this.screen_camera);
+            }
         }
         restoreVisible();
     }
diff --git a/notebooks/AR.ipynb b/notebooks/AR.ipynb
new file mode 100644
index 00000000..d518a0e1
--- /dev/null
+++ b/notebooks/AR.ipynb
@@ -0,0 +1,46 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import ipyvolume as ipv"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "scrolled": false
+   },
+   "outputs": [],
+   "source": [
+    "fig = ipv.figure()\n",
+    "ipv.examples.klein_bottle()"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.9.6"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}
diff --git a/setup.py b/setup.py
index b5d6f6b3..04c290c9 100644
--- a/setup.py
+++ b/setup.py
@@ -92,7 +92,7 @@ def read(fname):
         'requests',
         'ipyvuetify',
         'ipyvue>=1.7.0',
-        'pythreejs>=2.0.0',
+        'pythreejs @ git+https://github.com/mariobuikhuizen/pythreejs@feat_upgrade_for_xr',
         'matplotlib'
     ],
     license='MIT',