我们首先用 primitives 来创建一个场景，用类似于html的语法来创建一个立方体。
Adding a box
一个最简单的用primitives创建的立方体场景
就像常规的html元素一样，每个属性有一个值。我们可以为定义颜色，宽度(左右），高度（上下），深度（前后，即立方体厚度）。想了解更多的和 其他元素属性，请点击 common mesh attribute
一旦我们开启我们创建的场景，默认状态下我们可以看到场景的四周，我们可以拖动鼠标，移动手机或VR设备去环顾四周，我们也可以用wasd来控制。如果想进入 VR视角 ，可以点击右下角VR按钮。
A-Frame 使用右手坐标系来表述三维空间，大致可以这样描述：
- x轴正向向右
- y轴正向向上
- z轴正向垂直屏幕向外
查看图片
基本的距离单位为米(meters)，当我们创建一个虚拟现实场景时，很重要的一个问题就是我们创建的物体和现实中的物体的尺度的问题。如果我给一个box加上height = “100”这样的属性后，在你的电脑屏幕上看起来是很普通的box，但是在虚拟现实中它应该看起来是一个100m高的大家伙。
基本的旋转单位为角度(degress),为了确定旋转的正方向，我们可以使右手拇指向下，其余四指卷曲方向为正方向。(下面会详细解释角度问题)
旋转，定位，缩放一个box，我们可使用以下组件 position ， rotation下面会详细解释角度问题 , scale .下面是一个例子：
属性解释，窝自己研究了一下，这里自我感觉官方文档写的不好，竟然还有歧义。。。这篇文章里原文有 Positive Y-axis as “up” 然而position 组件介绍页面有Positive Y Axis extends down.所以这里说明一下：
- position 属性有三个值 第一个是左右，即X轴，负数往左，正数往右，第二个是y轴，确定上下，如果正数就往上去，负数就往下去，所以position 组件页面的说明有点 。。。错误？？，第三个属性为z轴，正数就往屏幕外来，负数就往屏幕里面去
- rotation属性就是上面说的旋转啦，那个“右手螺旋定则”之类的玩意美摆懂，我自己实验结果如下，rotation有三个值，三个值都是旋转角度，第一个是以x轴为旋转轴，嗯，，见过招财猫的手么，第一个值为正就”磕头“，即招财猫向下压手，为负数就往后仰。第二个值以y轴为旋转轴，如果为正，就是从左向右转，就是拿出你的右手巴掌，手心朝你脸，然后向大拇指方向转。如果为负数，就反着转，如果设为-90度，就是阿弥陀佛的手势。第三个值为以z轴为旋转轴，就像手机摇一摇一样，为整数就像左摇，为负数就向右摇。
- scale 三个属性，先把scale属性设置为1 1 1 则和没有设置一样，如果为2 1 1 则立方体x轴方向宽度×2,3就是×3,第二个属性就是高度，2的话就高度×2,第三个时厚度，即为2时厚度×2,如果是负数就是盒子变坑了，例如 1 -1 1 那从上面看就是一个盒子把顶盖去掉了，就好象塌陷了。1 -2 1的话就是顶盖去掉了高度变为2倍，就是塌陷到底之后把底打破又塌陷一个盒子的高度。
Applying a Texture to the Box
盒子不仅仅可以设置单一颜色，也可以应用纹理（就是贴图），为了确保颜色与纹理混合影响，下面的例子color为白色：
为了在渲染盒子之前就缓存好纹理，可以用资源管理系统 asset management system 我们定义一个img标签，设置id 和 src：
Animating the Box
我们可以利用动画系统 animation system 来给元素添加动画。一个动画被定义为一个标签。它应该放在被加动画元素的里面：
动画就是rotation position scale一样，attribute 设置动哪个属性， to就是从元素开始的属性变到这个值 repeat 是动几次，这家伙从0开始的，即设置为0就动一次，设置为1就动两次，以此类推，设置indefinit就是永动机啦。
Interacting with the Box
与元素交互可以点击和”瞅它“（凝视 gazing），我们在camera中央放置一个标志（cursor），如果我们没有定义一个相机，系统将默认一个相机。但是我们需要光标的情况下，我们就必须要定义一个相机，我们可以让屏幕中央的标志点击元素触发相应事件。例子：
这样就会定义一个带有标志（cursor）的相机，就是屏幕中有个小原点，狙击枪视角。上面的例子没有定义一个事件，我们接下来添加事件
另外，我们可以用javascript注册一个监听事件，事件是当我们看到物体时触发事件：
var box = document.querySelector('a-box');
box.addEventListener('mouseenter', function () {
box.setAttribute('scale', {
x: 4,
y: 1,
z: 6
});
});另外，我们也可以添加一个辅助元素来注册声明一个事件处理程序：
Lighting the Box
我们可以用标签点亮元素，例如你要加一个太阳。。我们可以这样点亮元素：
Adding a Background to the Scene
最后，我们可以用 添加背景色或这360全景图片或视频。下面是一个简单的仅仅使用单一颜色的例子：
以上就可以创造一个基本的场景，但是我们希望能够添加一些复杂的东西，所以你可以自己创建组件 using and writing components
