最简单的Web虚拟现实实现方案——A-Frame框架

【摘要】本文将为大家介绍最简单易用的Web虚拟现实支持实现方案——A-Frame框架。A-Frame是一个开源框架，用于通过自定义HTML元素构建WebVR解决方案。有了这个框架，网络程序员就可以在网络开发中添加虚拟现实支持，而无需学习一门全新的语言或Unity和Unreal等3D引擎。作为入门教程，本文将带您一步步实现构建支持Web虚拟现实的网页的全过程。1.什么是A-FrameA-Frame(https://aframe.io/)是一个开源框架，用于使用自定义HTML元素创建WebVR体验。这些元素使用three.js(http://threejs.org/)和WebGL(https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API)在场景中创建支持虚拟现实的元素，无需开发人员学习WebGL等较低级别的API即可构建简单的体验。A-Frame开发团队正在努力创建可扩展的虚拟现实网络，使开发人员能够构建具有竞争力的API。此外，一旦这个想法被广泛采用和确立，它很可能成为定义标准的一部分。这使我们能够使用新功能，例如JavaScript框架和浏览器的实验版本，而无需等待某些标准被浏览器实现和支持。2.设备兼容性接下来很可能会出现一个很重要的问题：A-Frame框架是否跨浏览器兼容？一个意想不到的结论是：在各种平台上，只要是兼容WebGL的浏览器，A-Frame体验都很好；当然，3D场景在没有VR支持的情况下还是可以看到的。这意味着Chrome、Firefox、Edge和Opera等流行浏览器都能够显示桌面级交互式3D体验。对于虚拟现实体验，OculusRift等设备需要连接到一些支持WebVR技术的浏览器，以实现虚拟现实兼容性（见下文）。说到智能手机，运行iOS和Android的最近两代现代智能手机是最合适的（iPhone6+、三星GalaxyS6+和我个人的HTCOneM9都很好用）。这些智能手机中的大多数在插入GoogleCardboard耳机时也支持虚拟现实。因此，与让VR在桌面环境中工作相比，在智能手机上实现和管理VR兼容性实际上更容易。3.准备工作按照本文的说明完成基于A-Frame的实验，您需要做以下准备工作：l实现基本类型的非VR体验：n您需要安装支持的浏览器WebGL如上所述。l要实现基于桌面的VR体验：n您需要安装支持WebGL的浏览器，例如最新的ChromiumWebVR版本（https://drive.google.com/folderview?id=0BzudLt22BqGRbW9WTHMtOWMzNjQ）或FirefoxNightly版本（https://nightly.mozilla.org/）。nOculusRift耳机（可能还有HTCVive，我只是还没有实际测试过）。l要实现基于移动端的VR体验，需要具备以下条件：n最新款的智能设备一般至少能够实现场景显示，让你在半虚拟现实的视野中环顾四周。nGoogleCardboard或GearVR耳机。4.开始工作首先，请打开A-Frame框架的入门教程页面（https://aframe.io/docs/guide/getting-started.html）。目前，A-Frame团队提供了各种选项来方便与A-Frame框架相关的各种实验，包括CodePen代码片段、npm构建版本、A-Frame框架JS文件（直接下载或通过CDN）、HTML模板和本地开发服务器。为了尽可能简单，我们将下载并直接使用A-Frame样板(https://github.com/aframevr/aframe-boilerplate/archive/master.zip)。将上述模板解压缩到您的Web项目所在的系统中。此模板不一定必须在本地Web服务器上运行。该模板使用CDN的A-Frame，所以我们只需要关注index.html文件即可。配置文件package.json中提供了一个基于npm的本地Web服务器用于测试目的。在本文中，我们将使用此服务器——但是，现在没有必要对其进行测试。5.启动本地服务器如上所述，A-Frame模板自带本地Web服务器，随时可以使用。虽然这对于测试A-Frame并不总是必要的，但这是一种很好的做法，可以降低通过计算机文件系统运行网页时出现各种跨源策略问题的风险。来糊涂了要运行本地Web服务器，请从终端/命令提示符切换到模板项目文件夹并运行以下命令：npminstall&&npmstart这将为Web服务器安装所有必需的文件，然后运行它。之后，如果你想再次运行服务器，只需运行命令“npmstart”。一旦本地网络服务器运行，它应该会自动打开我们的网络浏览器并加载我们的模板网页文件。模板中添加了LiveReload支持——这意味着无论何时更改页面，其内容都会自动刷新。如果您需要在不同的设备上打开网页，或者运行本地Web服务器后网页不会自动打开，您可以在浏览器中输入http://localhost:3000或http://192.168.0.1:3000。请注意，此处的IP地址对应于您计算机的IP地址。您应该看到初始场景如下所示：6.构建新场景现在，让我们删除模板代码并删除标记内的所有内容，只留下部分。我们所有的A-Frame元素都将放置在这个组件中。当前代码如下所示：A-Frame提供一组原型，提供我们VR场景中常用的元素。接下来，让我们添加一些元素来构建自定义场景。7.创建天空每个场景都需要一个天空部分（或某种背景）。这是单色图像或全景图像。这部分的原型是。使用单色图像实现的天空部分的代码如下：这将为我们的目标场景创建一个可爱的自然明亮的紫红色天空效果，如下图所示：像灿烂的天空效果，使用360度全景图像看起来会更漂亮。找到此类天空盒图像的好地方是Flickr网站。本网站提供了相当多的全景图片供您免费重复使用。我在Flickr上找到了LucaBiada(https://flic.kr/p/bCMJ4X)提供的以下图片：当我们使用以下代码将它放置在我们的场景中时：我们可以得到一个360度的全景图，如下所示如下图：8.添加一个长方体现在，我们有了一个场景。接下来，让我们向其中添加一些元素。要使用原型，我们可以在场景中放置一些盒子和立方体。以下代码将在场景中的道路上添加一个橙色框：代码中的color属性和我们天空盒中的color属性作用是一样的，用来指定我们的cuboid元素的材质颜色。然后，通过属性深度、高度和宽度来指定形状。我们的长方体尺寸为2x2x4，看起来像一个非常宽的盒子，隐约看起来像一辆放在路上的纸车。要将盒子放置在场景中的不同位置，您只需要修改其位置属性之一即可。该属性使用三个值，分别对应三个坐标轴：x轴、y轴和z轴。上述代码创建的长方体在我们的场景中如下图所示：9.添加几个圆柱体现在，我们将使用原型为场景的街道添加一些圆柱体：颜色和位置属性与我们上面创建的长方体的含义一致；不过这里新增了两个属性——height和radius，分别用来设置圆柱体的高度和半径。下图是我们添加新柱子后的场景图。因此，我们可以很容易地扩展上面的想法。这只是使用以下代码添加一行列：运行结果如下图所示：在A-Frame框架中，还有很多可供选择的圆柱体（Cylinders）。读者可以参考Cylinder参考文档（https://aframe.io/docs/primitives/a-cylinder.html）。十、添加一个球体现在，我们在3D场景中添加一个球体。这可以通过使用原型来实现，如下所示：这段代码很简单，它创建了一个略微诡异的黑色球体漂浮在我们身后的天空中：11.添加材质我们可以通过标签向我们的长方体、圆柱体和球体原型添加纹理。这需要构建一个A-Frame资产管理系统，让我们能够定义资产，然后将它们应用到我们的形状中。这是向场景添加纹理的推荐方法。我从http://subtlepatterns.com/dark-sharp-edges/下载并稍微修改了一张图像以用作纹理。然后我们可以通过以下方式将此资源添加到我们刚刚创建的场景中：上面代码中的Id属性给出了参考纹理的名称并将其应用于场景中的对象。src属性告诉A-Frame我们要使用的图像文件的名称。为了给场景中的物体指定材质，我们可以通过物体的src属性来指定材质——在贴图的ID前面使用hash技术，参考如下代码：通过上面的代码，将在天空中创建一个随机的、幽灵般的球体，这将是一个更好看的、接近的在效果质感上达到科幻效果。请参考下面的效果图。12.运行效果演示要真正在VR中观看以上体验，那么你要么需要将OculusRift连接到你的PC，要么你需要一部时尚的智能手机！当然，智能手机是最简单的选择。如果您没有VR耳机，当您走到智能手机上显示的场景时，您仍然可以看到上面实现的所有内容。此时，您可以摇动手机四处走动；请参考下图。如果您的手机使用了GoogleCardboard耳机，您可以通过点击右下角的VR图标切换到VR视图，请参考下图。13.VR体验好吧，如果你想在上面的A-FrameAvenue示例中走动，很好。您可以从这里点击A-FrameAvenue演示（https://www.devdiner.com/demos/aframedemo/）进行体验。14.总结今天提起WebVR，A-Frame无疑是一个简单易用的框架。通过这个框架，我们可以实现很多基于跨浏览器兼容的VR体验。其实我们可以使用A-Frame来实现更多的功能。我将在以后的文章中继续解决这些问题。谢谢阅读！