几个月前，我有机会第一次尝试了几种 WebVR 体验，我对它的可能性感到震惊。仅仅使用一个头戴式设备和我的 Firefox 浏览器，我就能玩游戏、探索世界、绘画、创作音乐，以及更多内容。这一切都通过开放的网络实现。我被迷住了。

不久之后，我被介绍了A-Frame，一个用于构建虚拟现实体验的 Web 框架。“Hello World” 演示 只有 15 行代码。这让我震惊。在虚拟现实中构建体验似乎是一项只属于超级开发者，或者来自《黑客军团》的家伙的任务。浏览了 A-Frame 文档之后，我意识到任何有一点前端经验的人都可以为虚拟现实创建一些东西……即使是我——一个喜欢在业余时间构建网站的市场营销人员。

我的团队即将进行一个演示。通常我们会创建一个又一个幻灯片。然而，这一次，我决定试一试 A-Frame，并使用虚拟现实来讲述我们的故事并演示我们的工作。

在两天内，我学会了如何构建这个（为共享目的略作修改）。你可以查看 GitHub 仓库这里。

结果是一个有趣而独特的演示。人们对虚拟现实的参与度远远超过了观看我们在一块屏幕上翻阅幻灯片。

这不是一篇“如何开始使用 A-Frame”的文章（有很多很棒的资源可以帮助你）。不过，我确实找到了一些“注意事项”的解决方案，我会在下面分享。

穿墙而过

我遇到的第一个障碍是摄像头会穿过物体和墙壁。经过一些研究，我发现了a-frame-extras。它包含一个名为“kinematic-body”的插件，它帮助我解决了这个问题。

控制

A-frame extras 还提供控制帮助程序。它让我能够轻松地实现键盘、鼠标、触摸屏等的控制。

生成房间

我不久就弄清楚了如何创建和放置墙壁来创建一个房间。但我不仅想要一个房间，我还想要多个房间和走廊。手动创建它们会花费很长时间。在我的研究过程中，我发现了这篇文章，作者使用一组数字创建了一个迷宫。这启发我用类似的方法创建我自己的地图。

const map = {
  "data": [
    0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0,
    0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0,
    0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0,
    0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0,
    0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0,
    0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0,
    0, 4, 4, 4, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0,
    4, 0, 0, 0, 4, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0,
    4, 0, 0, 0, 4, 4, 4, 1, 0, 8, 0, 0, 0, 0, 0, 1, 0, 0, 0,
    4, 0, 0, 0, 0, 0, 0, 3, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0,
    0, 4, 4, 4, 4, 4, 4, 1, 1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 0
  ],
  "height":19,
  "width":19
}

0 = 没有墙壁
1 – 4 = 具有不同纹理的墙壁
8 = 用户起始位置
9 = 将日志位置记录到控制台

这将允许我尝试不同的布局，从地图上的不同位置开始，并快速获取用于定位物品和房间的坐标（你将在下面看到这为什么有用）。你可以查看其余代码这里。

复制房间

创建了一个房间后，我想在地图上的不同位置重新创建一个房间的变体。这就是我学习接受“object”的地方。当使用“object”作为容器时，它允许容器内的实体相对于父实体对象进行定位。我发现这篇文章关于相对定位有助于理解这个概念。这使我能够复制一个房间的代码，并且只需为父实体提供新的位置坐标。

结论

我毫不怀疑，肯定有更好、更有效的方式来创建这样的东西，但一个像我这样的新手能够在短短几天内就构建出一些东西，这充分说明了 A-Frame 和 WebVR 的强大功能。A-Frame 社区也功不可没。我找到了几乎每个问题和疑问的库、代码示例和博客文章。

现在是开始使用 WebVR 和 A-Frame 的最佳时机，尤其是在 Windows 上使用最新版本的 Firefox 的每个人都支持它之后。查看网站，加入社区，并开始构建。