问题

When I try out the example: https://threejs.org/examples/webvr_cubes.html on my Android 7.0 Samsung Galaxy 7 phone using the Chrome browser and the Utopia360 headset, everything works and I can enter VR mode. When I try the exact same thing with exactly the same code, only on my local server, I get "Your browser does not support WebVR. See webvr.info for assistance."

The code is exactly the same and the three.js and WebVR.js files are exactly the same except for where the three.js and WebVR.js files are located in the directory structure (i.e. <script src="js/threejs/three.js" type="text/javascript"></script> instead of <script src="../build/three.js"></script>)

回答1:

The reason is that the threejs page has an embedded origin token to allow webvr to work without setting the chrome flag enable-webvr, but that only works when the page is served from "threejs.org".

You can see this at the top of the demo pages:

<!-- 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=">

So you have two choices:

Enable the webvr flag (chrome://flags#enable-webvr) in your phones browser,
Request an origin token that matches the domain of your website here: https://webvr.rocks/chrome_for_android.

Setting the flag worked for me even when page was served via http.

回答2:

The issue is that you must "serve your WebVR content via HTTPS", according to the Google WebVR status documentation.

Threejs.org is a site that uses HTTPS, but your localhost is almost certainly not delivering the content via a secure connection. That's why you're seeing that misleading warning that "Your browser does not support WebVR", when in fact, it does.

Unfortunately, the available methods to deliver HTTPS via Apache make it sound like the three options to get an SSL certificate for localhosts won't work on Chrome for Android (or are pricey), so using the WebVR polyfill is the best solution for the time being.

回答3:

It should work even with an untrusted certificate if you proceed. The important thing is that you should have a certificate, of course we are speaking about a development environment ¹. However the crucial part: you must use Chrome Canary for Android, see later.

Get Certificate

The easiest way

Use glitch, which is an online full-stack IDE (yep, with node and sqlite, made by the stackoverflow people) which will provide you a trusted subdomain.

Still easy and locally working way.

Creating certificate and corresponding certificate authority (CA)

you should use minica CA tool:

Install minica (You must install and setup a GO and gotools first)

go get github.com/jsha/minica

Run this simple command, you should use you LAN IP instead of localhost, though.

minica --domains localhost

which creates the following files in your working directory

minica-key.pem The private key of your new CA
minica.pem The root certificate of your CA
localhost/cert.pem The certificate of your website
localhost/key.pem The private key to sign of your website certificate.

If you do not know what are these concepts, I recommend this friendly introduction.

Serve your site with your certificate.

You can use the http-server npm package, which is easy to use and can serve certificates

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

then access your site like https://192.168.1.42 or whatever is your LAN IP address.

Install Chrome Canary to your Android

Google play has it.

Setup Chrome Canary flags

Type chrome://flags in your Chrome Canary's URL bar and enable the following flags: #enable-webvr and #enable-gamepad-extensions called WebVR and Gamepad extensions respectively.

Now your are good to go. ²

Notes:

If you plan to deploy your app in production you should acquire a globally trusted certificate from a CA. Let's Encrypt is free and easy automate and backed by the Linux Foundation, and sponsored by many big players.
WebVR on Android Chrome is still unstable and will be changed, so what I wrote will be deprecated soon.

来源：https://stackoverflow.com/questions/44976987/three-js-webvr-example-code-works-on-threejs-org-but-not-on-my-local-server

标签

android