在2019年伦敦Fullstack大会上，自由软件工程师Doug Sillars通过演示如何构建一个虚拟艺术画廊讨论了使用JavaScript实现虚拟和增强现实的现状。

无论是虚拟现实（让用户沉浸在完全3D生成的世界中）还是增强现实（在现实世界和数字对象之间提供深度集成），它们都是相对较新的技术，目前正在通过WebXR API集成到Web中。WebXR中的X是指未来可能出现的任何类型的沉浸式技术。

WebXR API仍在开发当中，只提供有限的浏览器支持和文档。WebXR GitHub代码库包含了WebXR核心概念介绍，方便入门WebXR。

即使没有WebXR API，仍然可以与AR/VR设备交互，并创建简单的跨平台应用程序。像A-Frame这样的库为应用程序开发提供了一个简化的接口，网上可以找到很多有趣的例子和实现。

A-Frame库基于three.js，three.js是一个流行的JavaScript 3D渲染库。A-Frame提供了一个简单的类似HTML的语法，易于掌握，开发人员可以用最少的JavaScript知识创建VR和AR应用程序。

在使用A-Frame时，开发人员可以使用类似HTML的标记来描述场景，然后A-Frame将这些标记转换为WebGL视图。为了将3D对象放置在真实空间（AR）中，开发人员目前需要使用特殊物理标签，这些标签可以在A-Frame网站上生成。有了这些标签，A-Frame就会知道应该在哪里以及放置哪些3D对象。

要创建一个简单的VR场景只需要一些标签：

<a-scene>
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25"></a-sphere>
</a-scene>

另一个值得一提的库是React-360，它允许开发人员使用与React类似的语法创建AR/VR用户界面。

最初，AR/VR应用程序需要使用昂贵的专用设备，这限制了它的应用范围。如今，开发者可以使用智能手机来实现类似的体验。虽然在智能手机上使用AR/VR应用程序是可能的，但仍然需要使用一些特殊的眼镜，让用户有更强烈的浸入式体验。谷歌首先推出这样的眼镜，叫Cardboard，不过现在有许多可供选择的解决方案。

Doug Sillars的完整演讲视频“在浏览器中构建艺术画廊”可以在FullStack网站上找到（需要免费注册）。

A-Frame是基于MIT许可发布的，它的源代码可以通过A-Frame Github代码库获得。

原文链接：

Building AR/VR Applications in the Browser

创作场景

A-Frame：在浏览器中构建 VR/AR 应用程序