A-Frame 是一个用于构建 VR 场景的 Web 框架。它不仅仅是一个个 3D 场景元素,或是一个标记语言,更是一个可以给 three.js 提供可描述、可扩展、可组合结构的实体组件库。

6f011d10-298c-11e7-845e-c3c5baebd14d.jpg

A-Frame 支持大部分 VR 设备,包括 Vive、Rift、Daydream、GearVR、Cardboard、Oculus Go 等,也可以用于 AR。你可以用它构建出非常有意思的 VR 场景。

特性

👓简单易学:只需要添加一个 <script><a-scene>,就可以开始创作了,无需安装也无需构建。想马上尝试?打开 https://codepen.io/leadream/pen/KjqBKM 看看下面这段代码实现的效果。

<html>
  <head>
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

❤️描述性的 HTML:HTML 是易读易懂的标记语言,基于 HTML 来创建 VR 场景,不仅方便编写,还很容易被其他人理解,比如开发者、设计师、创客,等等。

🔌实体组件结构:A-Frame 是一个实体组件框架,可以给 three.js 提供可描述、可扩展、可组合结构的实体组件库,开发者可以完全访问 JavaScript、DOM APIs、three.js、WebVR 和 WebGL。

🌐 跨平台 VR:支持大部分 VR 设备,包括 Vive、Rift、Daydream、GearVR、Cardboard、Oculus Go。即使你没有这些设备也没关系,A-Frame 也可以在电脑和手机上运行。

⚡️高性能:A-Frame 从底层就进行了很多优化,因此即使是大型 WebVR 应用也可以以 90fps 完美运行。

🔍3D 审查器:A-Frame 提供一个内置的 3D 审查器,<ctrl> + <alt> + i 就可以打开它,来对里面的元素进行审查了。

WX20190625-100225@2x.png

🏃组件:A-Frame 提供了很多底层组件,比如几何图形、材质、光线、投影等等;还有很多社区组件可以使用,比如粒子系统、物理模拟、海水等等。

🌍已被广泛使用:A-Frame 已经被诸多国际化大公司使用,比如 Google、Disney、Samsung、Toyota、Ford、Chevrolet、Amnesty International、CERN、NPR、NASA 等等,还有一些公司为 A-Frame 贡献了代码。

开始吧!

下面有一些链接,可以帮助你快速入门:

A-Frame 由 zhiyima 推荐