How to enable Google Cardboard VR mode?

[mstrazds]

Hi all,

I am loving working in react-three-fibre, it's been so easy to get started. I was wondering is it possible to fallback to Google Cardboard or at least detect a phone so that the behaviour of the browser is like that of Mozilla A-Frame?

Currently the response is VR not available, but I would like to enter into stereoscopic mode when on a phone. Are there any guides or tutorials on this?

Just to clarify, I am using the @react-three/xr library

Thanks so much,
Markus

[mstrazds]

Actually I just figured this out using the poly-fill: https://github.com/immersive-web/webxr-polyfill

Added the following to the index.js in the root of the create-react-app

import WebXRPolyfill from 'webxr-polyfill';
const polyfill = new WebXRPolyfill();

[mstrazds]

This only appears to work partially. When I try this on a device it does not enter VR mode correctly.

[mstrazds]

The index.js (in create react app) is the following:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import WebXRPolyfill from 'webxr-polyfill';
// eslint-disable-next-line no-unused-vars
const polyfill = new WebXRPolyfill({allowCardboardOnDesktop: true, cardboardConfig: { CARDBOARD_UI_DISABLED: true, ROTATE_INSTRUCTIONS_DISABLED: true, YAW_ONLY: true }});

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

App.js contains the following:

import { Suspense } from "react";
import { VRCanvas, DefaultXRControllers } from "@react-three/xr";
import {
  OrbitControls,
  Stage,
} from "@react-three/drei";
import "./App.css";

function App() {
  return (
    <div id="App">
      <VRCanvas shadows dpr={[1, 2]} camera={{ fov: 50 }}>
        <DefaultXRControllers />
        <color attach="background" args={["black"]} />
        <ambientLight intensity={0.03} />
        <directionalLight color="red" position={[0, 0, 5]} />
        <Suspense fallback={null}>
          <Stage contactShadowOpacity={1}>
            <mesh>
              <boxGeometry />
              <meshStandardMaterial />
            </mesh>
          </Stage>
        </Suspense>
        <OrbitControls
          autoRotate
          enableZoom={false}
          enablePan={false}
          enableRotate={false}
        />
      </VRCanvas>
    </div>
  );
}

export default App;

All the dependencies work and are loaded correctly, the page loads just fine and shows a spinning box. Jumping into VR mode on both desktop and iOS then goes buggy. I can see the wrapper attaches to the body of the page and moves the <canvas> element to be a child within it.

Not sure if anyone can help. I'm expecting the behaviour of the polyfill to be like this example: https://immersive-web.github.io/cardboard-vr-display/examples/