如何在当今的网络上构建VR

到2020年，虚拟现实的价值将达到70亿美元。在此期间，Web绝对不会保留唯一的2D环境。实际上，已经有一些将VR引入浏览器的简单方法。和它一起工作也非常有趣！

为了开始您的虚拟网络开发之旅，可以通过三种潜在的方式来实现：

JavaScript，Three.js和监视设备方向
JavaScript，Three.js和WebVR （我的新首选方法！）
CSS和WebVR （还很早）

我将逐一介绍一下每种方法的简短摘要。

JavaScript，Three.js和监视设备方向

目前，大多数基于浏览器的虚拟现实项目的工作方式之一是通过设备方向浏览器事件。这将告诉浏览器设备的方向，并允许浏览器在旋转或倾斜时拾取设备。通过VR透视图中的此功能，您可以检测到有人何时环顾四周，并调整摄像机以跟随他们的目光。

为了在浏览器中实现出色的3D场景，我们使用three.js ，这是一个JavaScript框架，可轻松创建3D形状和场景。它消除了将3D体验整合在一起的大部分复杂性，并使您可以专注于要在场景中整合的内容。

我在SitePoint上编写了两个使用Device Orientation方法的演示：

使用Google Cardboard和Three.js将VR引入网络
使用Three.js和Node在VR中可视化Twitter流

如果您是Three.js的新手，以及如何组合场景，我建议您看一下以上两篇文章，以更深入地介绍此方法。我将在此处介绍关键概念，但是将在更高层次上讲。

每个组件的关键组件都包含以下JavaScript文件（您可以从上面的示例演示中获取这些文件，也可以在three.js示例下载中找到它们）：

three.min.js –我们的three.js框架
DeviceOrientationControls.js –这是three.js插件，提供了我们上面讨论的Device Orientation。它可以移动相机以适应设备的移动。
OrbitControls.js –这是一个备用控制器，如果我们没有可以访问设备方向事件的设备，则用户可以使用鼠标来移动相机。
StereoEffect.js –一种Three.js效果，将屏幕分成立体图像，每只眼睛的角度略有不同，就像在VR中一样。这将创建实际的VR分割屏幕，而无需我们做任何复杂的事情。

设备方向

启用设备方向控件的代码如下所示：

function setOrientationControls(e) {if (!e.alpha) {return;}controls = new THREE.DeviceOrientationControls(camera, true);controls.connect();controls.update();element.addEventListener('click', fullscreen, false);window.removeEventListener('deviceorientation', setOrientationControls, true);
}
window.addEventListener('deviceorientation', setOrientationControls, true);function fullscreen() {if (container.requestFullscreen) {container.requestFullscreen();} else if (container.msRequestFullscreen) {container.msRequestFullscreen();} else if (container.mozRequestFullScreen) {container.mozRequestFullScreen();} else if (container.webkitRequestFullscreen) {container.webkitRequestFullscreen();}
}

当DeviceOrientation事件侦听器具有兼容的设备时，它将提供alpha，beta和gamma值。如果我们没有任何alpha值，则它不会更改控件以使用“设备方向”，因此我们可以改为使用“轨道控件”。

如果它确实具有此alpha值，则我们将创建一个设备方向控件，并将其提供给我们的camera变量进行控制。如果用户点击屏幕，我们还将其设置为将场景设置为全屏（在VR中，我们不想盯着浏览器的地址栏）。

轨道控制

如果不存在该alpha值，并且我们没有访问设备的“设备方向”事件，则此技术将提供一种控件，可通过使用鼠标拖动来移动摄像机。看起来像这样：

controls = new THREE.OrbitControls(camera, element);
controls.target.set(camera.position.x,camera.position.y,camera.position.z
);
controls.noPan = true;
controls.noZoom = true;

上面的代码可能会使您感到困惑，主要是noPan和noZoom 。基本上，我们不想通过鼠标在场景中进行物理移动，也不希望能够放大或缩小–我们只想环顾四周。

立体效果

为了使用立体声效果，我们这样定义它：

effect = new THREE.StereoEffect(renderer);

然后在调整窗口大小时，我们更新其大小：

effect.setSize(width, height);

在每个requestAnimationFrame我们将场景设置为通过效果渲染：

effect.render(scene, camera);

这是实现VR的设备定向样式如何工作的基础。使用Google Cardboard可以很好且简单地实现该功能，但在Oculus Rift上效果不佳。对于裂谷，下一种方法要好得多。

JavaScript，Three.js和WebVR

想要像Oculus Rift一样访问VR耳机方向吗？目前，WebVR是实现此目的的方法。 WebVR是一种早期的实验性Javascript API，可访问Oculus Rift和Google Cardboard等虚拟现实设备的功能。目前，该软件可在Firefox Nightly以及一些实验性的Mobile Chrome和Chromium构建。要记住的一件事是，它的规范仍在起草中，并且随时可能更改，因此请尝试一下，但知道您可能需要随着时间的推移进行调整。

总体而言，WebVR API通过以下方式提供对VR设备信息的访问：

navigator.getVRDevices

如果您有兴趣了解更多信息，请查看WebVR编辑器的草案，在这里，我将不涉及许多技术细节（我将在以后的SitePoint文章中对此进行更详细的介绍！）。我之所以不详细介绍它，是因为有一种更容易实现API的方法。

前述实现WebVR API的简便方法是使用Boris Smus的WebVR Boilerplate 。它提供了高水平的基准功能，可实现WebVR并优雅地降低了不同设备的使用体验。目前，这是我见过的最好的Web VR实施。 如果您希望为网络构建VR体验，那么这是目前最好的起点！

要开始使用此方法，请在Github上下载WebVR Boilerplate 。

您可以专注于编辑index.html并使用该设置中的所有文件，也可以从头开始将特定的插件实施到自己的项目中。如果您想比较每个实现之间的差异，我已经将上面带有Three.js和Node示例的VR中的Twitter流可视化迁移到了VR中由WebVR驱动的Twitter Stream中。

为了从头开始将此项目包含到您自己的项目中，您需要拥有的文件是：

three.min.js –当然是我们的three.js框架
VRControls.js –通过WebVR用于VR控件的Three.js插件（可以在bower_components/threejs/examples/js/controls/VRControls.js中找到）
VREffect.js – VR效果本身的three.js插件，用于显示Oculus Rift的场景（可以在bower_components/threejs/examples/js/effects/VREffect.js中找到）
webvr-polyfill.js –这是针对尚不完全支持WebVR的浏览器的polyfill（可以在GitHub上以及Boilerplate代码中的bower_components/webvr-polyfill/build/webvr-polyfill.js polyfill.js中找到）
webvr-manager.js –这是Boilerplate代码的一部分，该代码为您管理一切，包括提供一种进入和退出VR模式的方法（可在build/webvr-manager.js ）

实施它只需要对“设备定向”方法进行一些调整。这是为那些希望尝试这种方法的人提供的概述：

控制项

VR控件的设置非常简单。我们可以将一个新的VRControls对象分配给我们先前使用的controls变量。不需要轨道控制和设备方向控制，因为样板现在应该照顾没有VR功能的浏览器。这意味着您的场景在Google Cardboard上也应该能很好地工作！

controls = new THREE.VRControls(camera);

VR效果

该效果与StereoEffect实现非常相似。只需用我们的新VREffect替换该效果VREffect ：

effect = new THREE.VREffect(renderer);
effect.setSize(window.innerWidth, window.innerHeight);

但是，在此方法中，我们不会通过这种效果进行渲染。相反，我们通过VR管理器进行渲染。

VR经理

VR经理负责我们所有VR的进入/退出等工作，因此这是最终渲染场景的地方。我们最初通过以下方式进行设置：

manager = new WebVRManager(renderer, effect, {hideButton: false});

虚拟现实管理器提供了一个按钮，如果用户使用兼容的浏览器，则可以让用户进入虚拟现实模式；如果浏览器不支持虚拟现实，则可以进入全屏模式（全屏是我们想要的移动设备）。 hideButton参数表明我们是否要隐藏该按钮。我们绝对不想隐藏它！

然后，我们的render调用看起来像这样，它使用了一个来自我们three.js的update()函数的timestamp变量：

function update(timestamp) {controls.update();manager.render(scene, camera, timestamp);
}

完成所有这些操作后，您应该有一个有效的VR实施，可以根据设备将其自身转换为各种格式。

renderer.getSize()返回错误吗？ 这使我发疯了几个小时，但解决此问题所需要做的就是–更新three.js！

WebVR样板在运行中看起来像什么

这是我的Twitter示例在支持VR的浏览器上的外观：

单击VR图标后，将在Oculus Rift视图中显示以下内容：

这是智能手机上的视图外观，设备方向仍然允许我们环顾现场，并且没有分屏。内容的快速响应视图：

如果单击移动设备上的VR图标，将获得Google Cardboard风格设备的全屏视图：

CSS和WebVR

Mozilla的目标是在Firefox Nightly版本中也将VR查看功能引入其浏览器，但是还处于初期！在Mac和Oculus设置上运行它并没有太多运气。 Firefox的VladimirVukićević提到的各种约定包括将CSS 3D转换与VR全屏模式集成。

以弗拉基米尔（Vladimir）的博客文章为例，他说具有transform-style: preserve-3d元素应该从两个角度渲染两次，以将其带入VR：

#css-square {position: absolute;top: 0; left: 0;transform-style: preserve-3d;transform: translate(100px, 100px, 100px);width: 250px;height: 250px;background: blue;
}

如果您知道任何使用VR和CSS的演示，请告诉我！我还没有找到任何信息。将Web的HTML和CSS部分引入VR的想法无疑是一个非常有趣的概念。当我们都逐渐转向VR设备时，网络不可避免地会进入这样的VR领域！

结论

未来几年，随着我们的技术能力与我们的野心相提并论，技术世界正在缓慢但必将拥抱虚拟现实！推动VR普及及其价值的一件事是内容。我们需要提供VR内容供VR用户欣赏！有什么比通过网络更好，更轻松的方法？

如果您愿意尝试使用此代码构建VR演示，请在评论中分享它或在Twitter（ @thatpatrickguy ）上与我联系。我想穿上Oculus Rift或Google Cardboard，然后试一试！

我在JavaScript和VR上有一组精选的链接，供那些寻求快速参考的人使用。前往Dev Diner并查看我的《 Dev Diner VR和带有JavaScript开发人员指南》，其中包含本文中提到的两个链接，其他SitePoint优秀文章以及更多内容。如果您还有其他我没有列出的重要资源-也请让我知道！

From: https://www.sitepoint.com/how-to-build-vr-on-the-web-today/