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