A-Frame简明教程之创建场景
本文为A-Frame简明教程系列文章的第二篇，大家可以到专题里了解更多。
A-Frame创建场景
在A-Frame中，场景是全局根对象，是存放所有实体的容器，场景通过元素来表示。接下来，我们来通过一个案例来逐步了解下A-Frame的场景创建。
1.准备工作
准备工作可以分为两个部分：
- 导入A-Frame库
- 创建好a-scene标签
为了更好地显示实体，我们同时添加了个a-sky,并且给它一个颜色。如下面代码所示。
<html>
<head>
<meta charset="utf-8" />
<title>A-Frame创建场景title>
<script src="https://aframe.io/releases/0.7.0/aframe.min.js">script>
head>
<body>
<a-scene>
<a-sky color="#ddf">a-sky>
a-scene>
body>
html>2. 添加实体
接下来，我们来添加实体，利用a-box标签来添加一个盒子，类似的标签还有球体
<a-scene>
<a-box>a-box>
<a-sky color="#ddf">a-sky>
a-scene>此时，刚刚添加的盒子没有在屏幕中显示，我们可以通过设置位置position让之显现。
<a-scene>
<a-box position="0 0 -5">a-box>
<a-sky color="#ddf">a-sky>
a-scene>此时，屏幕中显示的盒子是白色的，我们可以通过设置color属性赋予盒子颜色。
<a-scene>
<a-box position="0 0 -5" color="red">a-box>
<a-sky color="#ddf">a-sky>
a-scene>也可以利用src属性设置盒子的纹理，可以使用图片、视频或canvas纹理。这时，记得把color属性去掉哟，以避免出现混合效果。
<a-scene>
<a-box position="0 0 -5" src="https://i.imgur.com/mYmmbrp.jpg">a-box>
<a-sky color="#ddf">a-sky>
a-scene>3. 使用资源管理
如果这个纹理会在其他形状中用到，我们最好采用素材复用方式，在a-assets中定义资源，然后再调用。
<a-scene>
<a-assets>
<img id="imgTexture" src="https://i.imgur.com/mYmmbrp.jpg" alt="" />
a-assets>
<a-box position="0 0 -5" src="#imgTexture">a-box>
<a-sky color="#ddf">a-sky>
a-scene>当然，我们也可以使用其他资源做纹理,例如视频或canvas等，如下代码所示。
这里需要注意的是，如果我们在video标签中使用了自动播放属性，视频加载会阻塞网页加载。
<a-scene>
<a-assets>
<img id="imgTexture" src="//i.imgur.com/mYmmbrp.jpg" alt="" />
<video id="videoTexture" src="//thenewcode.com/assets/videos/polina.mp4" loop="loop">
a-assets>
<a-box position="0 0 -10" src="#videoTexture" scale="4 4 1">a-box>
<a-sky color="#ddf">a-sky>
a-scene>
<script type="text/javascript">
var videoEl = document.querySelector('#videoTexture');
videoEl.play();
script>也可以使用canvas绘制纹理，如下代码所示。
我们利用AFRAME.registerComponent (name, definition)的方式注册组件，在组件里进行canvas的绘图。
<a-scene>
<a-assets>
<img id="imgTexture" src="//i.imgur.com/mYmmbrp.jpg" alt="" />
<video id="videoTexture" src="//thenewcode.com/assets/videos/polina.mp4" loop="loop">
<canvas id="canvasTexture">canvas>
a-assets>
<a-box position="0 0 -10" src="#canvasTexture" scale="4 4 1" draw-canvas="canvasTexture">a-box>
<a-sky color="#ddf">a-sky>
a-scene>
<script type="text/javascript">
/*
canvas纹理代码
*/
AFRAME.registerComponent('draw-canvas', {
schema: {default: ''},
init: function () {
this.canvas = document.getElementById(this.data);
this.ctx = this.canvas.getContext('2d');
// 绘图操作
this.ctx.fillStyle="#222266";
this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height);
}
});
script>4. 添加动画
利用a-animation标签添加动画，并利用它的诸多属性设置动画方式，下面代码设置循环播放动画。
<a-scene>
<a-box position="0 0 -10" color="red" rotation="0 45 45" scale="2 2 1">
<a-animation
attribute="rotation"
dur="10000"
fill="forwards"
to="0 360 360"
repeat="indefinite">
a-animation>
a-box>
<a-sky color="#ddf">a-sky>
a-scene>也可以设置事件交互，设置a-animation标签的begin方式为click实现单机开始动画。需要注意的是，需要添加个相机从而选中激活物体。
<a-scene>
<a-box position="0 0 -10" color="red" rotation="0 45 45" scale="2 2 1">
<a-animation
attribute="rotation"
dur="1000"
fill="forwards"
to="0 405 405"
begin="click">
a-animation>
a-box>
<a-sky color="#ddf">a-sky>
<a-camera>
<a-cursor>a-cursor>
a-camera>
a-scene>最后所有代码集成如下，大家也可以参考codepen上的案例。
<html>
<head>
<meta charset="utf-8" />
<title>A-Frame创建场景title>
<script src="https://aframe.io/releases/0.7.0/aframe.min.js">script>
head>
<body>
<a-scene>
<a-box position="0 0 -10" color="red" rotation="0 45 45" scale="2 2 1">
<a-animation attribute="rotation" dur="1000" fill="forwards" to="0 405 405" begin="click">
a-animation>
a-box>
<a-sky color="#ddf">a-sky>
<a-camera>
<a-cursor>a-cursor>
a-camera>
a-scene>
body>
html>待续
接下来，我们将研究利用JS的方式动态添加实体，敬请期待！