【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的第一个参数定义组件的名称,第二个参数是一个包含特定功能的对象。要实现我们的功能,只需要用到对象schemainit方法就够了,但除此之外,这个方法还有几个别的参数,有时间你可以自查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应用,该应用有两种全景背景,通过目光就能自由切换。如果你的项目没能正常运转,可以参考codepengist上的源码,自行检查问题到底出在哪。


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

相关推荐