引言
简单介绍A-FRAME，A-FRAME自创一套类HTML的标签让开发者可以像写页面一样轻松构建自己的WebVR场景应用，其底层是基于强大的WebGL，支持跨平台，看官网的介绍，A-FRAME提供了基础的集合形状、3D建模、相机、动画、光影等等功能，而这些用户都可以直接通过类似HTML标签快速使用并构建自己的WebVR场景。
标签
<a-scene>
<a-scene>是全局的根对象整个3D应用的场景，所有实体都应该存在这个场景中,<a-scene>处理了three.js以及WebVR一些以下事情
创建画布、渲染器以及渲染循环
默认的照相机和光影效果
创建WebVR Polyfill，VREffect
调用WebVR API设置VR UI交互
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>a-scene</title>
<script type="text/javascript" src="./lib/aframe.js"></script>
</head>
<body>
<a-scene>
</a-scene>
</body>
</html><a-box>
<a-box>是一个方形几何图形，下面直接在<a-scene>直接添加一个方形实体（长、宽、高分别都是1，颜色是红色）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>a-scene</title>
<script type="text/javascript" src="./lib/aframe.js"></script>
</head>
<body>
<a-scene>
<a-box color="red" width="1" height="1" depth="1"></a-box>
</a-scene>
</body>
</html>在浏览器预览的时候，我们并没有直接看到添加的box，通过<ctrl>+<Shift>+i进入webvr-inspector查看整个场景的各个元素，红色方形并没有在初始化时候的视野范围内（黄色线标识的是三维视野边界）
此时还看到camera的位置是在零点(0、0、0）的上方，只要调整camera的位置或者是调整正方形的位置，就可以初始化的时候显示正方形，设置<a-box>的position可以把方形移动到可视范围内，此外rotation可以设置方形的旋转角度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>a-scene</title>
<script type="text/javascript" src="./lib/aframe.js"></script>
</head>
<body>
<a-scene>
<a-box position="0 2.24 -4.22" color="red" rotation="0 45 45" width="1" height="1" depth="1"></a-box>
</a-scene>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。