javascriptreactjsthree.jswebxr

I keep seeing 'XRWebGLLayer' is not defined no-undef' when using three.js in react.js to create WebXR app

I'm trying to use WebXR using Three.js in React but I keep seeing this error:

'XRWebGLLayer' is not defined no-undef

for baseLayer: new XRWebGLLayer(session, gl)

I tried this same code in vanilla.js and had no errors at all but when I try it with react.js it doesn't compile.

The tutorials I'm referring to are: https://developers.google.com/ar/develop/webxr/hello-webxr and https://www.devbridge.com/articles/ar-app-development-tutorial/

I'm using version 0.133 of three.js and I imported it into my react app using: import * as THREE from 'three';

I'm relatively new to react and three.js. Can anyone please help point me in the right direction? I'd really appreciate it!!

Solution

  • XRWebGLLayer is available in the window object.

    Also refer:
    https://stackoverflow.com/a/62264777/4290781

    const { XRWebGLLayer } = window;
const baselayer = new XRWebGLLayer(session, gl);