火狐开发MozVR:通过浏览器创建VR内容

未来,Firefox用户能够使用诸如Oculus Rift之类的虚拟现实头戴显示设备感受一下完全交互式上网体验了。

Mozilla,火狐浏览器的创始团队,是其网络平台的主要倡导者,还为确保VR成为互联网“一流公民”做出巨大努力。随着A-Frame的发布,网络开发者可以轻易的在浏览器上为VR做实验。

Mozilla的“MozVR”团队负责公司的VR浏览器工作。公司最近发布的“A-Frame”是为创建VR浏览器提供资源的图书馆。Mozilla说它的作用是为VR浏览器“建立街区”。

火狐 浏览器 WebVR VR Oculus Rift MozVR

MozVR

Joshua Carpenter,Mozilla团队产品设计领导者,是A-Frame背后智囊团的一员,也是让VR浏览器不断前进的战士。

“A-Frame目标直指互联网研发者社区。他们中的大部分人因为不了解Web GL而不能参与其研发,WebVR运行需要强大确复杂的3D API。”Carpenter跟我说。“一个想用A-Frame创建VR网站的网络开发者只需将他们的网站放入网页源代码处理器即可。”

Carpenter分享了一个便捷指导来精确展示用A-Frame来制作一个基本VR网站有多简单。


A-Frame是个使网站开发者能够轻松创建VR网络的工具。它只是一个标记,开发者只需要几行HTML代码,就可以创建在、移动设备、桌面上的运行场景。用来开始创建A-Frame站点需要的是……
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My first VR site</title>
    <script src="https://aframe.io/releases/latest/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
    </a-scene>
  </body>
</html>
  然后研发者们可以往场景中添加东西。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My first VR site</title>
    <script src="https://aframe.io/releases/latest/aframe.min.js"></script>
  </head>
  <body>
      <a-scene>
        <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
        <a-cube position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1"  color="#4CC3D9"></a-cube>
        <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
        <a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
        <a-sky color="#ECECEC"></a-sky>
      </a-scene>
  </body>
</html>

火狐 浏览器 WebVR VR Oculus Rift MozVR

A-Frame有构建板块所需要的模板、视频、天空的形式、几何要素等。包括控制器、动画制作和光标。让网络互动更加便捷而富有活力。

因为A-Frame只是网页源代码编辑器,与网络研发者将其融入工作流程相似,用JAVA脚本做微调极其直截了当,举例说明

var scene = document.querySelector('a-scene');
var cube = document.createElement('a-cube');
cube.setAttribute('color', 'red');
scene.appendChild(cube);

在保护之下,A-Frame是建立在实体部件结构上。基于开发世界的最佳实践,这个基础使A-Frame模件和可延伸性。小物件可以毫无冲突地从场景中移出或被加进去,然后延伸地将使研发者能够创造和分享他们自己原有的构建部分和工具。(未来将出现的一个特征)

Moz VR团队已经用A-Frame创造了许多VR网络模板,使用右上角的“查看资源”按钮来探索Github的隐藏密码,在火狐中开启巡查员(ctrl+shift+c)或谷歌(ctrl+shift+i)来发现每个模板背后的隐藏密码并及时调整它。

你可以在Mozilla的Mozilla VR页面了解更多关于VR网络的东西,包括怎样设置你的浏览器使其与VR网络相适应