【WebVR教程翻译】超简单！用A-frame快速打造你的VR网站

原文地址：Building a Simple Web VR UI with A-frame
作者：paul christophe
译者：大田

A-frame是由three.js封装而来的一组库，使用它可以方便地构建跨平台Web VR应用。如果你对它毫无概念，还没有准备好继续往下读，可以先看看A-frame官方示例，了解了解这个它是工作的，以及它能用来做什么。

在这篇文章中，我将教会你如何创建一个VR网站，你可以体验到在两个360°全景之间切换。实现这一效果，我们将会用到一些A-frame的特定代码和一点点JavaScript的代码。

首先，我们要创建一个基本的HTML5页面，并在这个页面中引入最新版本的A-frame库。

<script src=”https://rawgit.com/aframevr/aframe/b813db0614ac2b518e547105e810b5b6eccfe1c8/dist/aframe.min.js"></script>

译者注
以上链接已失效，最好自行搜索可引用的A-frame库

我在codepen放置了完整的A-frame示例以供参考。

现在我们搭好了基本的架子，就可以开始往这个架子里添加<a-scene>标签，构造我们的VR场景了。<a-scene>标签在一个A-frame项目里相当于一种容器，可以往里填充图形，摄像头，图像，视频和其他各式组件，以此来构建VR场景。接下来，我们用它来创建一个简单的红球：

译者注
<a-scene>标签相当于<div>

<a-scene>
 <a-sphere color="#F44336" radius="1" position="0 2 0"></a-sphere>
</a-scene>

现在可以在你的浏览器或手机上看看，瞧，你已经有了一个VR场景！

接下来，我们再来添加一个摄像头和光标，当我们的目光落到球体上时，就能完成“点击”它的动作。

设置fuse参数为true，这样一来，当A-frame就监听到我们的目光在球体上停留时，就会执行绑定在球体上的点击事件。

timeout参数决定了我们盯着球体看多少毫秒这个事件才会激活。

<a-scene>
  <a-camera position="0 2 4">
    <a-cursor color="#4CC3D9" fuse="true" timeout="10"></a-cursor>
  </a-camera>
  ...
</a-scene>

我们可以在已有VR控件的基础上进行拓展，使用Javascript编写各式各样的自定义功能，而这些原生控件和拓展控件，都统称为A-frame中“组件”。现在我们要为球体绑定一系列事件，所以也可以将这个球体称之为球体组件。下一步我们就正式来编写这个球体组件，使得当我们盯着它看时，整个VR背景会执行变换。

我们先不急着写执行背景变换的功能。先照以下代码写，当目光停留在球体上并激活点击事件时，我们在浏览器的控制台中打印日志：

<script>
AFRAME.registerComponent('set-sky', {
  schema: {default: ''},
  init() {
    this.el.addEventListener('click', () => {
      console.log(this.data);
    });
  }
});
</script>

方法registerComponent的第一个参数定义组件的名称，第二个参数是一个包含特定功能的对象。要实现我们的功能，只需要用到对象schema和init方法就够了，但除此之外，这个方法还有几个别的参数，有时间你可以自查A-frame文档了解。以上代码绑定“点击”事件到球体上，并在控制台打印球体的data属性。在schema中设置default为空字符串表示如果事件触发时没有值传递到组件，将设置this.data为空字符串。

在A-frame中，功能组件是以属性的形式绑定到组件上的。我们将set-sky组件绑定到先前创建好的球体上，并将其data初始化为hello字符串：

我们将添加“设置天空”组件到我们先前创建的球体并为其分配数据“你好”：

<a-sphere set-sky="hello" color="#F44336" radius="1" position="0 2 0"></a-sphere>

现在我们把目光停留在球体上激活事件，并查看控制台，瞧，有什么变化！

要设置一个360°的全景图像作为VR环境，我们要使用标签名为<a-sky>的A-frame组件。该组件实际上是一个巨球，它把整个VR场景包住，而我们为其提供一张图片作为其内部纹理。现在先在场景中添加<a-sky>标签，后面会为其赋上纹理：

<a-sky></a-sky>

下面我们将另一个用于导航的球体添加到场景中，并设置不同的图片作为set-sky功能组件的data参数。<a-sky>需要方形投影图像才能正常显示，所以我在Flickr上找了两张这样的图在本示例中使用：

<a-sphere color=”#F44336" radius=”1" position=”-4 2 0" set-sky="https://c3.staticflickr.com/2/1475/26239222850_cabde81c39_k.jpg"></a-sphere>
<a-sphere color=”#FFEB3B” radius=”1" position=”4 2 0" set-sky="https://c2.staticflickr.com/2/1688/25044226823_53c979f8a1_k.jpg"></a-sphere>

最后，我们来调整set-sky组件，它将我们传递给它的data变量设置为待切换的全景图像地址：

AFRAME.registerComponent('set-sky', {
  schema: {default: ''},
  init() {
    const sky = document.querySelector('a-sky');

    this.el.addEventListener('click', () => {
      sky.setAttribute('src', this.data);
    });
  }
});

大功告成！我们现在构建好了可交互的VR应用，该应用有两种全景背景，通过目光就能自由切换。如果你的项目没能正常运转，可以参考codepen或gist上的源码，自行检查问题到底出在哪。