如何从 Next.js 中的 iframe 启动 WebXR？

Question

我有一个 Next.js 应用程序

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

当我点击左下角的 AR 按钮（“在 AR betrachten”）时，它 应该在 Android Chrome 上打开 WebXR 。但它会退回到 Android 场景查看器。

iframe 来源是

https://polygoningenieur.dev/。 如果我直接在浏览器中访问 https://polygoningenieur.dev/，它就可以工作，WebXR 正在打开。

Sandbox 是一个标准的 next.js 应用程序，next.config.js 如下所示：

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

和像这样的index.tsx：

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"));

所以我不确定我在这里错过了什么。 AR 应用程序位于 https 域上，iframe 具有allow="xr-spatial-tracking"，并且我已将权限策略标头设置为允许在 next.config.js 中进行 xr-spatial-tracking。 （Codesandbox 说允许 iframe 是一个未知的属性，但在我的本地环境中没有对此抱怨。）

（附加信息：我在 Android 上使用 Chrome，AR 应用程序是使用模型查看器构建的，并且使用 html 和 JavaScript 保持静态。）

但是为什么不起作用呢？谢谢你！ :)

Answer 1

他们似乎正在使用

模型查看器 在 AR 中展示 3D 模型。 您还可以使用此 package 在您的 nextjs 应用程序中使用相同的功能

演示代码和盒子链接：

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

演示故障链接：

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

要在模型查看器中尝试 3D 模型，您可以使用以下 glb 文件：

1. Sketchfab
2. 涡轮鱿鱼
3. CGTrader
4. 3dexport等