A-frame
概观
A-Frame是在网络上创建3D和虚拟现实体验的开源框架。它由内置MozVR团队更迅速地原型WebVR经验，我们问自己“什么会在网络上的虚拟现实是什么样子？”。正如今天在网络上，我们点击链接从一个页面跳转到页面，有一天我们将通过门户网站步行从世界跳转到世界各地。并有世界之间，我们需要WebVR内容跳转。不幸的是，只有在世界WebGL的开发商屈指可数，但也有几百万的Web开发人员，网页设计师和3D艺术家。a-aframe使VR内容创作到每个人手中。
A-frame是一个实体组件系统基于three.js所使用DOM界面框架。在A-frame里一切都是实体，我们插入组件，可以随意撰写外观，行为和功能集成。
其项目依赖document-register-element
Document-register-element独立工作的W3C自定义元素规范的轻量级版本,有了它我们可以自定义我们的html标签
a-scene
封装了所有的webGL底层API实现的全景布局，比如VR模式，是根据检测navigator.getVRDisplays() （检测任何可用的VR设备连接到计算机）
一个场景是由a-scene创建的，是全景渲染的根对象，所有的元素都放在a-scene这个组件里
<a-scene> </a-scene>
a-sky
每一个场景都需要一个背景，可以直接放置src为全景图片，或者直接渲染color值
<a-sky color="#cccccc" src="images/3video.jpg"></a-sky>
a-box a-assets
通过<a-assets> 标记将纹理添加到我们的长方体、圆柱和球等原型上
盒子，创建形状，如框、多维数据集或墙壁。这是一个实体，它规定了几何与几何基元组框。
定义一个盒子的形状大小颜色值img可以以ID的形式引用它，然后渲染图片到这个形状上
<a-assets>
<img id="texture" src="images/3video.jpg" alt="">
</a-assets>
<!--定义一个盒子-->
<a-box src="#texture" color="#B76705" depth="2"height="2" width="4" position="0 0 -1.25"></a-box>
a-cylinder
圆柱体，它可用于创建管和曲面。
<!--添加一根柱子-->
<a-cylinder color="yellow" height="40" open-ended="true" radius="0.5" position="-40 0 -8"></a-cylinder>
<!-- Basic cylinder. -->
<a-cylinder color="crimson" height="8" radius="1.5" position="-40 0 8"></a-cylinder>
<!-- Hexagon. -->
<a-cylinder color="cyan" segments-radial="8"></a-cylinder>
<!-- Pac-man. -->
<a-cylinder color="yellow" theta-start="100" theta-length="280" side="double" position="-20 0 8"></a-cylinder>
<!-- Green pipe. -->
<a-cylinder color="green" open-ended="true"></a-cylinder>
a-sphere
创建一个球形
<a-assets>
<img id="darktexture" src="images/5video.jpg" alt="">
</a-assets>
<a-sphere src="#darktexture" segments-height='18' segments-width='36'
color="" radius="2" position="20 0 20"></a-sphere>
a-camera
规定相机组件与控件相关的组件的映射。
<a-box look-at="#camera"></a-box>
<a-camera id="camera"></a-camera>
<!--or-->
<a-entity position="0 0 0">
<a-camera></a-camera>
</a-entity>
a-collada-model
a-collada-model从一个3D建模程序创建或从web下载COLLADA模型。这是一个实体，src指向模型的.dae文件
<a-scene>
<a-assets>
<a-asset-item id="tree" src="model/tree1.dae"></a-asset-item>
</a-assets>
<!-- Using the asset management system. -->
<a-collada-model src="#tree" position="1 0 -1"rotation="0 30 0" scale="1.4 1.4 1.4"></a-collada-model>
<!-- Defining the URL inline. Not recommended but more comfortable for web developers. -->
<a-collada-model src="tree1.dae"></a-collada-model>
</a-scene>
A-cone
创建一个锥的形状。 这是一个实体，规定锥的几何与几何原始设置。设置渲染纹理
<a-assets>
<img id="texture" src="images/icon.png">
</a-assets>
<!-- Basic cone. -->
<a-cone color="pink" radius-bottom="2" radius-top="0.5"></a-cone>
<!-- Textured box. -->
<a-cone src="#texture"></a-cone>
可以单独这样定义一个锥形
<a-cone position="0 0 -20" rotation="35 45 30" height="10" radius-top="2"
radius-bottom="10" color="#F3BA8D"></a-cone>