【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上的源码，自行检查问题到底出在哪。

---