[译]使用A-Frame在两天内创建一些东西

几个月前，我有机会第一次尝试WebVR，我被这些可能性吸引了。仅仅使用我的头戴设备和火狐浏览器，我就能玩游戏、探索世界、画画、创造音乐等等。全部通过网页。我被吸引了。

Sep-05-2017-13-10-42.gif

不久之后，我了解到了构建虚拟现实体验的Web框架A-Frame。”Hello World”演示例子只有15行代码。这在我脑海中爆炸开来，构建虚拟现实似乎是为超级开发人员所保留的任务，或者是机器人做的。在浏览A-Frame文档后，我意识到任何拥有一些前端体验的人都可以为虚拟现实创造出一些东西，甚至是一个喜欢在业余时间建立网站的营销人员。

我的团队马上有一个演讲。通常我们会使用幻灯片进行演示。不过这一次，我决定给A-Frame一个镜头，并使用虚拟现实来讲述我们的故事并演示我们的工作。

在两天之内，我能够教自己如何构建https://slightlyoffbeat.github.io/marketing-vr/（为了分享目的而略作修改）。您可以在GitHub上查看项目https://github.com/slightlyoffbeat/marketing-vr。

结果是一个有趣和独特的演讲。人们在虚拟现实中的参与感远远超过了我们在屏幕上翻幻灯片。

image1-500x333.jpg

这不是一篇“如何开始入门A-Frame”的文章（有很多很好的资源）。但是，我确实找到了一些解决方案，我将在下面分享几个“陷阱”。

穿墙

我遇到的第一个障碍之一是相机将穿过物体和墙壁。经过一番研究，我找到了a-frame-extras框架https://github.com/donmccurdy/aframe-extras。它包括一个“kinematic-body”的属性，帮助我解决了这个问题。

控制器

A-frame extras也在控制方面也有帮助https://github.com/donmccurdy/aframe-extras/tree/master/src/controls，它给了我一个简单的方法来实现键盘，鼠标，触摸屏等的控制。

生成房间

没花费多长时间就搞清楚了如何创建和定位墙壁来创建一个房间。我不是只想要一个房间。我想要多个房间和走廊。手动创建是不现实的。通过我的研究找到了这篇文章https://24ways.org/2016/first-steps-in-vr/，作者通过数组创建了一个迷宫。这也激发了我使用类似的方法生成我自己的地图：

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=打印到控制台的日志位置

这能允许我尝试不同的布局，从地图周围的不同位置开始，并快速获取定位物品和房间的坐标（您将看到为什么这在下面有用）。您可以在此处查看其余的代码。https://github.com/slightlyoffbeat/marketing-vr/blob/master/js/map.js

复制房间

一旦我创建了一个房间，我想在地图上的不同位置重新创建一个类似的房间。我们就需要学会使用”对象”。当你使用“作为容器时，它允许容器内的实体相对于父对象进行定位。我发现这个关于相对定位的文章有助于理解这个概念https://medium.com/immersion-for-the-win/relative-positioning-in-a-frame-d839fc0e3249。这允许我复制一个房间的代码，并且为父实体提供新的位置坐标。

结论

我毫不怀疑，有更好和更有效的方式来创建这样的东西，但是像一个像我这样的新手能够在几天之内建立起来的事实就足以说明A-Frame和WebVR的力量。A-Frame社区也值得信赖。上面有几乎所有问题的资料、代码示例和博客文章。现在是开始使用WebVR和A-Frame的完美时间，特别是Windows上支持最新版本的Firefox的用户。查看网站，加入社区，开始建设。