【本文翻译自A-Frame官网，原文见扩展阅读】
首先啊，为什么要叫概览2呢？因为概览一时没用markdown代码显示不方便被删了。概览2就是概览一：）。
A-Frame 是什么呢？A-Frame是一个在web上用来实现3D和虚拟现实体验的开源框架。它是由MozVR team建立来为了更快的实现原生WebVR的效果，显然我们会不由自主地自问“虚拟现实在web上实现会是什么样呢？”在现在的网页上，我们都是通过点击链接在页面直接跳转，未来我们一定可以通过步入一个哆啦A梦的传送门从一个世界跳转到另一个世界（应该是指的虚拟现实的不通场景切换）。为了拥有能够跳转的“世界”，我们需要webVR。不幸的是，这个世界上只有一大把WebGL的基佬开发者，但是呢web攻城狮，网页设计师和3D艺术家却却成千上百万。怎么办呢？不用担心A-Frame就是为了我等对webGL没多大研究的人而生的。话不多说，先hello world：
<html>
<head>
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box color="#6173F4" width="4" height="10" depth="2"> </a-box>
<a-collada-model src="monster.dae" position="-1 0.5 1" rotation="0 45 0 "></a-collada-model>
<a-image src="fox.png"></a-image>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
A-Frame 允许我们创建跨平台的VR场景，无论是桌面还是Oculus Rift 或者仅使用html的移动平台。我们可以放下那些复杂的库类仅通过几行类似html的标记语言就可以让VR场景跑起来，听起来是不是有点小激动呢？因为A-Frame是建立在HTML之上的，所以呢，我们可以像我们平时用js处理html元素一样处理它，同时我们可以继续使用我们喜欢的js库和框架（e.g：d3,React）.但是一个重要的因素是A-Frame介绍了theentity-component-system pattern用中文就是“实体部件系统 模式”，一种在3D和游戏开发中通用的模式，到HTML中使其模块化，具有扩展性和灵活性。如果我们把3D使用到网页里，我们需要适应工业界已经存在的模式。在栗子中的场景实际上使用了便利元素（就是别人已经做好的东西，比如模型）；在A-Frame中，是这样实现的：
<html>
<body>
<a-scene>
<a-entity geometry="primitive: box; depth: 1; height: 1; width: 1" material="color: #4CC3D9" position="-1 0.5 1" rotation="0 45 0"></a-entity>
<a-entity collada-model="monster.dae"></a-entity>
<a-entity geometry="primitive: plane" material="src: url(fox.png)"></a-entity>
<a-entity geometry="primitive: sphere; radius: 5000" material="color: #EF2D5E" scale="-1 1 1"></a-entity>
</a-scene>
</body>
</html>
在底层，A-Frame 是建立在 Custom Elements之上且由three.js（http://www.hewebgl.com 上有相关中文教程，写得不错）提供支持。虽然A-Frame初看仅仅只是一些常见的类似于<a-cube>的HTML元素，但是它的根本是长的像文本对象模型的基于three.js框架的实体部件系统。A-Frame场景的每一样事物都是一个添加了外形动作功能的组件的实体。这就允许了有经验的开发者分享他们可以被重复利用的组件，其他开发者也可以在他们的场景中快速利用这些组件。上面所说的看起来有点冗长，但是知道它会产生真正的能量当我们能够随心所欲的制作外观和行为：
<html>
<body>
<a-scene>
<!-- Configure entity object by adding more components. -->
<a-entity geometry="primitive: box; depth: 1; height: 1; width: 1" material="color: #4CC3D9" position="-1 0.5 1" rotation="0 45 0" physics="boundingBox: 1 1 1; mass: 2" explode="on: collide" template="src: butterflies.template; type: nunjucks" speech-controls="trigger: siri"></a-entity>
<a-entity collada-model="monster.dae"></a-entity>
<a-entity geometry="primitive: plane" material="src: url(fox.png)"></a-entity>
<a-entity geometry="primitive: sphere; radius: 5000" material="color: #EF2D5E" scale="-1 1 1"></a-entity>
</a-scene>
</body>
</html>
通过通读文档可以获取更多细节，在阅读或使用当中，如果你遇到任何问题，可以加入在Slack的成千上万的开发者中去讨论！欢迎来到网页的未来。
欣赏一下那些厉害的家伙做的很赞的东西。
网友评论