对像是 Oculus Rift 这样的头戴式虚拟设备的朝向感兴趣?WebVR 是当前可行的方法。WebVR 是一种先锋的实验性质的 JavaScript 的 API,它提供访问 Oculus Rift 和 Google Cardboard 等虚拟设备的能力。当前,它在 Firefox Nightly 和一些 上可用。需要记住的一点是,WebVR 的细节依然在草稿阶段且随时可能会改变,所以可以拿它做一些实验,而且过些时候你可能需要做一些调整。
总之,WebVR API 可以让你通过如下方式访问虚拟现实设备:
navigator.getVRDevices
我不会在这里讲太多细节(在之后 SitePoint 上的文章中我会讲更多细节的东西),如果你对细节感兴趣的话可以看看 the WebVR editor’s draft。我不讲细节的原因是有更简单的方法实现 API。
上面说的更简单的实现 WebVR API 的方法是使用 WebVR Boilerplate from Boris Smus。在不同的设备上,它可以保证基本的 WebVR 功能,同时考虑到用户体验上的优雅降级。它是我至今经过的最好的 web 虚拟现实实现。如果你在找寻基于 web 的虚拟现实实现方案,这便是当前最好的选择。
要开始使用此方法,先下载 WebVR Boilerplate on Github。
你可以使用其中的文件,专心编辑 index.html,或者你也可以从草稿开始实现特定的插件。如果你想比较两者的区别,我已经把上面提过的 Visualizing a Twitter Stream in VR with Three.js and Node迁移到 WebVR powered Twitter Stream in VR 了。
要把此项目加到你自己的草稿上,你需要这些文件:
实现它仅需要稍微调整下设备朝向方法。以下是给想尝试的朋友的一份综述:
控制器VR 控制器是很容易创建的,我们只需要通过创建一个 VRControls 对象给我们之前使用的 controls 变量就可以了。由于 Boilerplate 目前应该注意浏览器没有 VR 功能,因此轨迹控制器和设备方式控制器不是必须的。这意味着你的动画应该依然在 Google Cardboard 上能够很好的运行
controls = new THREE.VRControls(camera);
VR Effect
Effect 是非常类似于实现了 StereoEffect 类的类。只不过用新的 VREffect 类替换了原来的:
effect = new THREE.VREffect(renderer);
effect.setSize(window.innerWidth, window.innerHeight);
然而,在这个方法里我们不会通过 Effect 渲染,而是,通过我们的 VR 管理器来渲染。
VR管理器VR 管理器关注我们所有进入或退出 VR 等等诸如此类的,因此这是我们的场景最终渲染的地方。我们通过下面的方式初始化管理器:
manager = new WebVRManager(renderer, effect, {hideButton: false});
如果VR管理器在一个可兼容的浏览器里,那么它会提供一个可以让我们进入VR 模块的按钮,如果它们的浏览器不支持 VR,那么进入全屏(全屏是我们为移动端准备的)。hideButton 参数表示我们是否想隐藏按钮或不隐藏按钮,我们定义为不隐藏!
我们像这样去调用渲染,它使用的 timestamp 变量是来自 three.js 的 update() 方法:
function update(timestamp) {
controls.update();
manager.render(scene, camera, timestamp);}
在所有的地方,你都应该让 VR 根据设备的不同而转化它本身的实现。
Isrenderer.getSize() 返回一个错误?这让我抓狂了几个小时,但是要想修改这个错误——更新 three.js!
WebVR Boilerplate在行动中是什么样子的这是我在 Twitter 上的例子的视图在支持 VR 的浏览器上的样子:
这是在 Oculus Rift 视图里当你点击 VR 图标时的样子:
这是在手机上的样子,设备方向仍然允许我们旋转场景,但是我没有截屏。一个很好的满足响应试的视图:
如果我们在手机上点击VR图标,我们就能得到为 Google Cardboard 样式设备提供的全屏视图:
CSS 和 WebVR