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."

代码完全相同，three.js和WebVR.js文件完全相同，除了three.js和WebVR.js文件位于目录结构中的位置（即<script src="js/threejs/three.js" type="text/javascript"></script>而不是<script src="../build/three.js"></script> Photographe Photographephoto ）

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证书的三个选项在Chrome for Android（或价格昂贵）上无效，因此使用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或您的局域网IP地址。

将Chrome Canary安装到您的Android

Google play has it.

设置Chrome Canary标记

在Chrome Canary的网址栏中输入chrome://flags并启用以下标记：#enable-webvr和#enable-gamepad-extensions名为 WebVR 和游戏手柄分别是。

现在你很高兴。 ²

注意：

1. 如果您计划在生产环境中部署应用程序，则应从CA获取全局受信任的证书。让我们的加密免费，轻松自动化，并得到Linux基金会的支持，并得到众多大型企业的赞助。

2. Android Chrome上的WebVR仍然不稳定且会被更改，因此我写的内容很快就会被弃用。