How do I start WebXR from an iframe within Next.js?

Question

I have a Next.js app

• https://codesandbox.io/s/next-js-forked-6fgnr7?file=/index.tsx

and it should open WebXR on Android Chrome when I click on the AR button bottom left ("in AR betrachten"). But it falls back to the Android Scene Viewer.

The iframe source is https://polygoningenieur.dev/. If I go to https://polygoningenieur.dev/ directly in my browser, it works, WebXR is opening.

The Sandbox is a standard next.js app, the next.config.js looks like this:

module.exports = {
  async headers() {
    return [
      {
        source: "/",
        headers: [
          {
            key: "Permissions-Policy",
            value: "xr-spatial-tracking=()"
          }
        ]
      }
    ];
  }
};

and the index.tsx like this:

import React from "react";
import { render } from "react-dom";
import "./style.css";

const App = () => (
  <div>
    <div id="ar-layout">
      <iframe
        src="https://polygoningenieur.dev"
        id="ar-showcase"
        title="AR-App Example"
        width="800"
        height="600"
        allow="xr-spatial-tracking"
        allowFullScreen
      ></iframe>
    </div>
  </div>
);

render(<App />, document.getElementById("root"));

So I am not sure what I am missing here. The AR app is on a https domain, the iframe has allow="xr-spatial-tracking" and I have set the permission policy header to allow xr-spatial-tracking in the next.config.js. (Codesandbox says allow on iframe is a unknown prop, but there is no complaint about that in my local environment.)

(Additional info: I am using Chrome on Android, the AR-App is built with model viewer and is static with html and JavaScript.)

But why is it not working? Thank you! :)

Answer 1

It seems like they are using model viewer to showcase 3d models in AR. You can also use the same in your nextjs app using this package

Demo codesandbox link : https://codesandbox.io/s/google-model-viewer-nextjs-p4gge

Demo glitch link : https://glitch.com/edit/#!/grave-verbose-angora?path=index.html%3A19%3A17

To try 3d models into modelviewer you can use glb file file from following:

1. Sketchfab
2. Turbosquid
3. CGtrader
4. 3dexport etc.