本文以渐进式Web应用程序为基础，和您讨论如何使用A-Frame和WebXR，来构建虚拟现实（VR）和增强现实（AR)。

虚拟现实(Virtual Reality，VR)将人们带到了另一个世界，让大家体验到自己就好像置身于虚拟世界中的感觉。而增强现实(Augmented Reality，AR)提供了将现实世界和虚拟世界融合在一起的可能性。例如：直播、社交、以及艺术等场景，可以说，VR和AR都为人类行为的改变、知识的转移、培训、以及研究，提供了独特的机会与方式。不过，所有这些应用如今都可以在浏览器中实现了。下面，我将以渐进式Web应用为基础，使用A-Frame和WebXR的Web API与您深入探究。

什么是A-Frame?

A-Frame是一个基于HTML的、可用于构建VR和AR体验的Web框架。从本质上说，它是一个强大的实体框架，提供了可扩展和可重用的结构。由于A-Frame建立在WebXR和Three.js之上，因此开发者可以不受限制地访问JavaScript、DOM API、three.js、WebXR和WebGL。其中，WebXR是一种可用于在浏览器中创建VR和AR体验的Web API，Three.js是一种VR/AR框架，而WebGL则负责渲染。

如何上手?

您可以在无需额外安装的情况下，通过HTML文件来开发A-Frame应用。“A-Frame学校”提供了丰富的A-Frame学习资源。您可以通过Glitch上的“入门示例”，来了解和试用A-Frame。此处的Glitch是一个适用于JavaScript和Node.js的在线式IDE。

A-Frame中的ECS

基于ECS架构的A-Frame常被用于开发3D游戏。此处的ECS(实体-组件-系统，Entity-component-system)架构是一种遵循“组合优于继承(composition over inheritance)”原则的模式。也就是说，每个实体都是由组件所组成，并可以链接到容器的对象上。作为可重用的模块，组件可以链接到实体上，以向实体提供相应的功能。

所有逻辑都是通过组件实现的。我们可以通过配置和混合组件，来定义不同类型的实体。其中，A-Frame通过提供如下API，来代表ECS的各个部分：

  • 用元素来表示实体

  • 用上的HTML属性来表示组件

实体的抽象例子：

下面让我们来查看一些使用各种组件，来构建实体的抽象示例。其中Sphere(球体)是一个实体，而Position、Geometry和Material是该实体的组成部分。

Sphere = Position + Geometry + MaterialBall = Position + Velocity + Physics + Geometry + Material1.2.

A-Frame中的语法实体

如下代码段所示，我们根据前面的示例，创建了Sphere实体的语法：

HTML

1.2.3.

代码清单 1

可见，要绘制该球体，您需要定义一个，并将组件添加为HTML属性。通常，大多数组件都会有多个属性，并使用类似于CSS的语法来表示。

几何体(Primitives)

A-Frame提供了诸如或等几何体元素。它们是一些方便初学者在A-Frame中使用的HTML元素，可被用于包装底层的实体组件。如下代码段展示了几何体 被包含在带有各种几何体和物料组件的之下。

HTML

Primitive:Entity:1.2.3.4.

代码清单 2

在DeBrowser中构建VR场景

下面，让我们来构建一个包含了各种实体和动画的基本A-Frame VR场景(如下图所示)。

图 1

首先，我们需要为此项目创建一个文件夹。接着，在该“项目文件夹”中创建一个index.html文档，并将如下HTML代码放入其中：

HTML

   
      
   
   
      
      
   1.2.3.4.5.6.7.8.9.

代码清单 3

我们需要将最新版本的A-Frame作为脚本标签，包含在中，并且在中包含标签。

什么是场景?

所有实体和组件都必须被添加到待渲染的场景中。在A-Frame中，场景是由实体表示的。能够为我们处理三个.js和WebXR样板，其中包括设置WebGL(负责渲染)、画布、相机、灯光、渲染器、渲染循环、以及针对HTC Vive、Oculus Rift、Samsung GearVR等平台开箱即用(out-of-the-box)的WebXR支持。

通过Entity类，场景实体继承了其所有属性、链接组件的能力、以及在开始渲染循环之前，等待其所有子实体和节点(例如和)的加载行为。

添加实体

在我们的中，您可以使用A-Frame的一种默认几何体(如)来添加各种3D实体。如下代码段定义了的颜色。

HTML


   1.2.3.

代码清单 4

图 2

如上图可见，由于相机和都默认位于0、0、0原点上，那么在未对其移动之前，您将无法看到该盒子。因此，您可以通过使用“位置组件(position component)”将box转换为3D形式的空间展示。

在3D中转换实体

让我们先来看看3D空间。如下图所示，A-Frame使用的是右手坐标系，即默认的相机方向为：X轴正方向向右延伸，Y轴正方向向上延伸，Z轴正方向向着我们伸出屏幕：

图 3

使对相机可见

我们需要让盒子对于相机可见、可旋转并可缩放。首先，为了使其可见，您可以使用位置组件在负Z轴上将盒子向后滑动5米。同时，您还应该在正Y轴上，将盒子向上移动2米，这样盒子就不会与底面相交。

为了使其可旋转与缩放，我们同样需要使用相同的右手坐标系，将盒子倾斜并让其尺寸翻倍(如下代码段所示)。

HTML


     
     1.2.3.4.

代码清单 5

由于WebXR的API是以米为单位来返回位置的，因此A-Frame的距离单位也是“米”。在为VR设计场景时，我们需要考虑实体的真实世界缩放。一个height="10" 的盒子，在你的桌面上也许看起来很正常，但是在VR中就显得过大了。此外，旋转的单位为“度”，不过它在转换到three.js时，则会在内部被转换为弧度。

父子转换

A-Frame的HTML也可以表示3D场景图。在场景图中，实体可以有一个父级和多个子级。子实体能够从其父实体处继承各种变换(包括：位置、旋转和缩放)。例如，我们可以将某个“球体”作为某个盒子的子元素(如下图所示)：

HTML


    
        
    1.2.3.4.5.

代码清单 6

由计算可知，球体的位置为1、2、3。这是通过将球体的父位置与其自身位置组装在一起而实现的。同样，球体将会继承盒子的旋转和缩放。

添加环境组件

A-Frame允许开发人员创建各种可以让其他人轻松使用的可重用组件。例如：环境组件就能够通过一行HTML代码，为我们生成了各种环境。它不但方便我们便捷地启动VR应用，而且提供了十多种具有众多参数的环境。

为此，我们首先需要添加带有脚本标签的环境组件。通过unpkg.com，您可以获得指向相关npm模块的最新CDN链接(如下代码段所示)。

HTML


   
   1.2.3.4.5.

代码清单 7

然后，如下代码段所示，请在由环境组件链接到的标记中，添加一个a-entity。您可以指定诸如preset:forest的预设环境，以及“树木数量”到“修整量”等许多其他参数。

HTML


    
    
    1.2.3.4.5.6.

代码清单 8

预设是定义特定样式的参数值组合，它们是您实现自定义的起点。您可以按下ctrl+alt+i，调用检查器(Inspector)来调整这些参数。如下图所示，作为一种用于检查和调整实体/组件的工具，检查器类似于浏览器的DOM检查器，不过它是专为3D和A-Frame量身定制的。

图 4

添加资产管理系统

您可以使用元素将纹理(texture)应用到box中。其中，资产管理(Asset Management)可以在渲染场景之前，加载和缓存图像和视频。预加载和缓存的方式可提高性能。如下代码段便是如何将资产管理应用到图像上的示例：

HTML


    
        
    
    
        
    
    1.2.3.4.5.6.7.8.9.

代码清单 9

上面定义了一个带有图像纹理的标签。如下图所示，该img有一个id="boxTexture"。该id会以src="#boxTexture"方式被引用到盒子中。

图 5

添加动画

如代码清单10所示，您可以使用动画组件为盒子和球体设置动画，例如，通过设置如下内容，让盒子可以上下移动：

  • 设置属性：object3D.position.y; to: 2.2，实现盒子在Y轴上的2到2.2米之间移动。

  • 在方向(dir)上可以交替上升和下降。

  • å°†2000毫秒设置为持续一个周期的时长。

  • 用loop指定动画的无限重复。

HTML


    
        
    
    
        
    
    1.2.3.4.5.6.7.8.9.10.

代码清单 10

上述代码的最终运行结果，如下图所示，您也可以在Glitch中查看到。

图 6

增强现实

当然，A-Frame也可以实现AR的体验。同样，您可以参考Glitch上给出了入门示例，作为实现AR的起点。

图 7

此示例已针对AR的“命中测试(hit testing)”应用进行了扩展。其结果可以在如下代码段中查看到。其中的粗体部分为添加的内容。当然，您也可以通过链接--https://glitch.com/edit/#!/ar-basic-hittest，参考glitch中的具体实现过程。此外，您还可以通过URL--https://ar-basic-hittest.glitch.me/，在自己的手机上测试其最终版本。

HTML


    
    
    
        
        
        
        
    
    
        
    1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.

代码清单 11

什么是AR命中测试?

命中测试可以将虚拟对象与现实世界中的对象(如地板、桌子和墙壁等)相对齐。在下面的示例中，您可以将上图 7 中的对象内嵌放置到桌上。其方法是通过相机，使用十字线瞄准桌子，然后定位该桌子(即命中测试)。

在AR中进行命中测试前，您需要首先在脚本标签中包含ar-components.js。您可以直接从Glitch处复制此库--https://glitch.com/edit/#!/ar-basic-hittest。

在场景标签中，您应当通过hit test命令，指明要用到的WebXR功能。然后通过a-entity去应用对象的真实比例。

最后，请使用组件定义一个新实体：ar-hit-test。该组件可以将虚拟对象内联并放置在您通过相机看到的真实对象上，如下图所示。为了支持命中测试，请通过a-plane组件去定义一个20厘米的正方形标线。

图 8

展望

A-Frame还可以实现更多的VR和AR应用。您可以通过链接--https://aframe.io/，查阅到更多的示例和文档。例如，您可以使用命中测试去制作“AR篮球游戏”等。

译者介绍

陈 峻 （Julian Chen），51CTO社区编辑，具有十多年的IT项目实施经验，善于对内外部资源与风险实施管控，专注传播网络与信息安全知识与经验；持续以博文、专题和译文等形式，分享前沿技术与新知；经常以线上、线下等方式，开展信息安全类培训与授课。

原文标题：Virtual Reality and Augmented Reality in the Browser，作者：Peter Eijgermans