Mozilla 开源了 VR 框架 A-Frame

Mozilla 创建并开源了 A-Frame ，这是一个用于在桌面浏览器、智能手机和 Oculus Rift 上创建 VR 场景的框架。

A-Frame 是一个在浏览器中创建 VR 体验的开源框架。该框架由 Mozilla 的 MozVR 团队创建和开发。A-Frame 使用了一个在游戏开发中经常使用的“实体 - 组件（ Entity-component ）”系统，其中，实体是放置在场景中的对象，而组件是与那些实体相关的属性。实体使用 HTML 标签定义，而组件则基于一种类似 CSS 语法的 HTML 属性。实体需要置入一个场景，其中包含了 VR 中需要渲染的一切内容。

下面的示例代码描绘了一个边长为 1 米的红盒子实体（立方体）：

<a-scene>
  <a-entity geometry="primitive: box; width: 1" material="color: red"></a-entity>
</a-scene>

目前，geometry组件支持下列primitive：box、circle、cylinder、plane、ring、sphere、torus、torusKnot。其他组件包括：camera、light、sound、fog、material、scale，等等。实体可以关联多个组件创建更复杂的场景，像下面的示例代码这样：

<a-entity geometry="primitive: cube; depth: 1; height: 1; width: 1"
         material="color: pink"
         light="intensity: 2"
         position="-1 5 0"
         sound="src: dangerzone.mp3; volume: 2">
</a-entity>
{1}

为了简化开发人员的工作，Mozilla 封装了一些实体 - 组件元素，创建了若干语法更简单易用的原语。如下所示，这行代码描绘了与上文相同的正方体：

<a-cube width="1" color="red"></a-cube>预定义的原语包括：a-camera、a-cylinder、a-plane、a-sphere、a-light、a-sky、a-image、a-video，等等。a-model让开发人员可以在场景中加载 OBJ 或 DAE 3D 模型资产。

动画是虚拟现实渲染的重要组成部分。A-Frame 内部使用基于 Web 动画规范的 tween.js 。下面的这段代码实现了一个男人的旋转模型：

<a-entity id="model" position="0 0 -2">
  <a-animation attribute="rotation" from="0 -30 0" to="0 330 0" dur="15000" easing="linear" repeat="inifite"></a-animation>
  <a-model position="-.35 0 .55" rotation="0 -20 0" scale="1.5 1.5 1.5" src="../_models/man/man.dae"></a-model>
</a-entity>

A-Frame 可以用于主流的桌面浏览器中，场景受鼠标或键盘控制，也可以用于智能手机和 Oculus Rift 头戴设备上。有个问题是，某些特定的场景在部分 Android 设备上不能正常渲染，但这个问题很快就会被修复。Mozilla 创建了若干展示这项技术的演示程序。感兴趣的读者可以从GitHub 上下载A-Frame 的源代码。

查看英文原文： Mozilla Has Created A-Frame, a VR Framework