three.js WebVR 示例代码适用于threejs.org，但不适用于我的本地服务器

Question

当我使用 Chrome 浏览器和 Utopia360 耳机在我的 Android 7.0 三星 Galaxy 7 手机上试用示例：https://threejs.org/examples/webvr_cubes.html 时，一切正常，我可以进入 VR 模式。当我使用完全相同的代码尝试完全相同的事情时，仅在我的本地服务器上，我得到"Your browser does not support WebVR. See webvr.info for assistance."

代码完全相同，三个.js和WebVR.js文件完全相同，只是三个.js和WebVR.js文件位于目录结构中（即<script src="js/threejs/three.js" type="text/javascript"></script>而不是@987654326 @)

Answer 1

原因是threejs页面有一个嵌入的原始令牌，允许webvr在不设置chrome标志enable-webvr的情况下工作，但只有当页面从“threejs.org”提供时才有效。

您可以在演示页面的顶部看到：

<!-- Origin Trial Token, feature = WebXR Device API (For Chrome M69+), origin = https://threejs.org, expires = 2019-01-07 -->
<meta http-equiv="origin-trial" data-feature="WebXR Device API (For Chrome M69+)" data-expires="2019-01-07" content="ArPzyYNrUDiXsGOh647Ya7MtVUA1nM+WFMnPWu7eoF2nQHOP6mTATIbiv0w+k2kFaPofZG/04ZEQdsACq4IA0wQAAABTeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJYUkRldmljZU02OSIsImV4cGlyeSI6MTU0Njg4MzAxOH0=">

所以你有两个选择：

1. 在您的手机浏览器中启用 webvr 标志 (chrome://flags#enable-webvr)，
2. 在此处请求与您网站的域匹配的原始令牌：https://webvr.rocks/chrome_for_android。

即使页面是通过 http 提供的，设置标志也对我有用。

Answer 2

根据Google WebVR status documentation，问题在于您必须“通过 HTTPS 提供 WebVR 内容”。

Threejs.org 是一个使用 HTTPS 的站点，但您的 localhost 几乎可以肯定不会通过安全连接传递内容。这就是为什么您会看到“您的浏览器不支持 WebVR”的误导性警告，而实际上确实支持。

不幸的是，the available methods to deliver HTTPS via Apache 听起来好像为本地主机获取 SSL 证书的三个选项在 Android 版 Chrome 上不起作用（或者价格昂贵），因此使用 WebVR polyfill 是目前最好的解决方案.

Answer 3

如果您继续，它甚至可以使用不受信任的证书。重要的是要有证书，当然我们说的是开发环境¹。但是关键部分：您必须使用 Android 版 Chrome Canary，见后文。

获取证书

最简单的方法

使用glitch，这是一个在线全栈IDE（是的，带有node和sqlite，由stackoverflow人员制作），它将为您提供一个受信任的子域。

仍然是简单的本地工作方式。

创建证书和相应的证书颁发机构 (CA)

你应该使用minica CA 工具：

安装minica（您必须先安装和设置GO 和gotools）

go get github.com/jsha/minica

运行这个简单的命令，你应该使用你的 LAN IP 而不是 localhost。

minica --domains localhost

在您的工作目录中创建以下文件

• minica-key.pem你的新 CA 的私钥
• minica.pem你的CA的根证书
• localhost/cert.pem您网站的证书
• localhost/key.pem 用于签署您的网站证书的私钥。

如果你不知道这些概念是什么，我推荐这个friendly introduction。

使用您的证书为您的网站服务。

可以使用http-server npm 包，使用方便，可以提供证书

http-server -a 0.0.0.0 -p 8080 -S -C localhost/cert.pem -K localhost/key.pem

然后访问您的站点，例如 https://192.168.1.42 或您的 LAN IP 地址。

将Chrome Canary 安装到您的Android

Google play has it.

设置 Chrome Canary 标志

在 Chrome Canary 的 URL 栏中键入 chrome://flags 并启用以下标志：#enable-webvr 和 #enable-gamepad-extensions 分别称为 WebVR 和 Gamepad 扩展。

现在你可以开始了。 ²

注意事项：

1. 如果您计划在生产环境中部署您的应用程序，您应该从 CA 获取全球信任的证书。 Let's Encrypt 是免费且简单的自动化程序，由 Linux 基金会提供支持，并得到许多大玩家的赞助。

2. Android Chrome 上的 WebVR 仍然不稳定，会发生变化，所以我写的很快就会被弃用。