WebVR Polyfill
WebVR 规范 的 JavaScript 实现。该项目确保
您的 WebVR 内容适用于任何平台,无论浏览器/设备是否具有原生 WebVR 支持,或者实施时存在不一致的地方。
查看使用此 polyfill 的基本 WebVR 示例。
安装
脚本
在 build/webvr-polyfill.js 下载构建并将其包含为脚本标记, 或使用 CDN。您也可以在与 webvr-polyfill.min.js 相同的位置使用缩小文件。
<script src='webvr-polyfill.js'></script> <!-- or use a link to a CDN --> <script src='https://cdn.jsdelivr.net/npm/webvr-polyfill@latest/build/webvr-polyfill.js'></script>
NPM
如果您使用 browserify 或构建工具webpack ,请通过 npm 进行安装。
$ npm install --save webvr-polyfill
使用
使用版本 > = 0.10.0的说明。对于 <= 0.9.x 版本,请参阅 0.9.40标记
webvr-polyfill 公开了一个构造函数, WebVRPolyfill 对象进行配置。请参阅 src/config.js 上的完整配置选项。
确保在调用任何 VR 代码之前实例化 polyfill!该 polyfill需要修补 API,如果它不存在,那么您的内容代码可以假设 WebVR API 将正常工作。
如果使用脚本标记,则存在 WebVRPolyfill 全局构造函数。
var polyfill = new WebVRPolyfill();
在模块化的 ES6 世界中,导入和实例化构造函数类似:
import WebVRPolyfill from 'webvr-polyfill'; const polyfill = new WebVRPolyfill();
以下是查询显示器并基于其设置控件的示例 环境。请记住,您仍然需要提供控件和代码 如果没有找到本机 VRDisplays,则支持类似桌面的体验, 因为CardboardVRDisplay仅适用于手机。请参阅 示例。
// Polyfill总是为我们提供 `navigator.getVRDisplays` navigator.getVRDisplays().then(displays => { // 如果我们有一个原生 VRDisplay,或者如果 polyfill // 为我们提供了 CardboardVRDisplay,使用它 if (displays.length) { vrDisplay = displays[0]; controls = new THREE.VRControls(camera); vrDisplay.requestAnimationFrame(animate); } else { // 如果我们没有 VRDisplay,我们可能会打开 // 桌面环境,因此请设置面向桌面的控件 controls = new THREE.OrbitControls(camera); requestAnimationFrame(animate); } });
目标
polyfill 的目标是提供一个库,以便开发人员创建 针对 WebVR API 的内容,而不用担心浏览器和设备 他们的用户在不断增长,但支离破碎 的世界中。
polyfill 的三个主要组成部分是:
- 注入 WebVR 1.1 JavaScript 实现(如果不存在)
- 修补了 API 不完整或不一致的浏览器
- 如果 WebVR 不受支持,或者具有本地支持,请在移动设备上提供合成的 CardboardVRD 显示 但没有原生 VRDisplays 和 PROVIDE_MOBILE_VRDISPLAY 为 true(默认)。
效果
性能对于 VR 来说至关重要。如果你发现你的应用程序太慢, 考虑调整一些上述参数。特别是保持 BUFFER_SCALE 在0.5(默认值)可能会有很大帮助。
开发
如果你有兴趣在polyfill本身开发和贡献,你需要 安装了 npm 并熟悉下面的一些命令。完整列表的可用命令,请参阅 package.json 脚本。
$ git clone git@github.com:immersive-web/webvr-polyfill.git $ cd webvr-polyfill/ # Install dependencies $ npm install # Build uncompressed JS file $ npm run build # Run tests $ npm test # Watch src/* directory and auto-rebuild on changes $ npm watch
测试
现在,在配置和逻辑中有一些单元测试用于如何实现 polyfilled。 请务必在提交任何 PR 前进行测试,如果有新的测试,就可以得到奖励!
$ npm test
由于 polyfill 的性质,还必须在适当的情况下对您的更改进行测试。
发布新版本
仅限维护者,为了削减 npm 的新版本,请使用 [npm version] 命令。 preversion , version 和 postversion npm 脚本将运行测试,构建,添加构建文件和标签到git,推送到github,新的npm版本。
npm version <semverstring>
许可证
这个程序是商业和非商业用途的免费软件, 根据 Apache 2.0 许可证 分发。