A-Frame简明教程之创建场景

本文为A-Frame简明教程系列文章的第二篇，大家可以到专题里了解更多。

A-Frame创建场景

在A-Frame中，场景是全局根对象，是存放所有实体的容器，场景通过元素来表示。

接下来，我们来通过一个案例来逐步了解下A-Frame的场景创建。

1.准备工作

准备工作可以分为两个部分：

• 导入A-Frame库
• 创建好a-scene标签
  为了更好地显示实体，我们同时添加了个a-sky,并且给它一个颜色。如下面代码所示。

2. 添加实体

接下来，我们来添加实体，利用a-box标签来添加一个盒子，类似的标签还有球体、平台、圆柱等。

此时，刚刚添加的盒子没有在屏幕中显示，我们可以通过设置位置position让之显现。

此时，屏幕中显示的盒子是白色的，我们可以通过设置color属性赋予盒子颜色。

也可以利用src属性设置盒子的纹理，可以使用图片、视频或canvas纹理。这时，记得把color属性去掉哟，以避免出现混合效果。

3. 使用资源管理

如果这个纹理会在其他形状中用到，我们最好采用素材复用方式，在a-assets中定义资源，然后再调用。

当然，我们也可以使用其他资源做纹理,例如视频或canvas等，如下代码所示。
这里需要注意的是，如果我们在video标签中使用了自动播放属性，视频加载会阻塞网页加载。

也可以使用canvas绘制纹理，如下代码所示。
我们利用AFRAME.registerComponent (name, definition)的方式注册组件，在组件里进行canvas的绘图。

4. 添加动画

利用a-animation标签添加动画，并利用它的诸多属性设置动画方式，下面代码设置循环播放动画。

也可以设置事件交互，设置a-animation标签的begin方式为click实现单机开始动画。需要注意的是，需要添加个相机从而选中激活物体。

最后所有代码集成如下，大家也可以参考codepen上的案例。

待续

接下来，我们将研究利用JS的方式动态添加实体，敬请期待！

声明

爱前端，乐分享。FedFun希望与您共同进步。
欢迎任何形式的转载，烦请注明装载，保留本段文字。
独立博客http://whqet.github.io
极客头条http://geek.csdn.net/user/publishlist/whqet
CSDN博客http://blog.csdn.net/whqet/
我的https://www.jianshu.com/u/c11d4318b3c7