【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上的源碼，自行檢查問題到底出在哪。

---