综述
A-Frame是一个在web上创建3d和虚拟现实体验的开源框架。我们问自己“网上虚拟现实会是什么样子呢?”。它是由MozVR团队更快原型WebVR经验。今天在网上,我们点击链接跳转页面，有一天我们将穿过门户从世界的世界。在跳转之间拥有世界。我们需要WebVR内容。不幸地，只有世界上少数WebGL开发者,但是现在有成千上万的web开发人员,网页设计师,和3 d艺术家。A-Frame将VR内容创建到每个人手中。一个A-Frame “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让我们创建跨越桌面的虚拟现实场景, the Oculus Rift, and mobile with just HTML. 我们可以在图书馆和运行一个虚拟现实场景在短短几行标记。因为它基于HTML,我们可以用JavaScript操作场景像我们正常的HTML元素,我们可以继续使用我们最喜欢的JavaScript库和框架 (e.g., d3, React). 但是是关键因素 A-Frame 介绍了entity-component-system模式,模式中常用的3 d游戏开发,HTML的可组合性、可扩展性和灵活性。如果我们要把3 d网络,我们需要采用现有模式的行业。现场在上面的示例中实际使用便利元素;在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是建立在自定义元素和由three.js。尽管 A-Frame起初看起来只有少数的自定义HTML元素<a-cube>A-Frame其核心是 entity-component-system-based three.js framework with a DOM interface.所有的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>
阅读文档前后的更多细节,如果你有任何问题,加入其他数百名开发人员空缺!欢迎来到网络的未来。
看看人完成的尖顶了不起的事情。