本文为A-Frame简明教程系列文章的第二篇,大家可以到专题里了解更多。
A-Frame创建场景
在A-Frame中,场景是全局根对象,是存放所有实体的容器,场景通过元素来表示。接下来,我们来通过一个案例来逐步了解下A-Frame的场景创建。
1.准备工作
准备工作可以分为两个部分:
- 导入A-Frame库
- 创建好a-scene标签
为了更好地显示实体,我们同时添加了个a-sky
,并且给它一个颜色。如下面代码所示。
<!DOCTYPE html>
<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-scene>
<!--为了更好地显示实体,我们添加个蓝色的天空-->
<a-sky color="#ddf"></a-sky>
</a-scene>
</body>
</html>
2. 添加实体
接下来,我们来添加实体,利用a-box
标签来添加一个盒子,类似的标签还有球体<a-sphere>
、平台<a-plane>
、圆柱<a-cylinder>
等。
<!--
a-scene是全局根对象,是存放所有实体的容器
-->
<a-scene>
<!--添加一个盒子-->
<a-box></a-box>
<!--为了更好地显示实体,我们添加个蓝色的天空-->
<a-sky color="#ddf"></a-sky>
</a-scene>
此时,刚刚添加的盒子没有在屏幕中显示,我们可以通过设置位置position
让之显现。
<!--
a-scene是全局根对象,是存放所有实体的容器
-->
<a-scene>
<!--
添加一个盒子
position属性设置位置,三个数字分别对应x,y,z三个方向
-->
<a-box position="0 0 -5"></a-box>
<!--为了更好地显示实体,我们添加个蓝色的天空-->
<a-sky color="#ddf"></a-sky>
</a-scene>
此时,屏幕中显示的盒子是白色的,我们可以通过设置color
属性赋予盒子颜色。
<!--
a-scene是全局根对象,是存放所有实体的容器
-->
<a-scene>
<!--
添加一个盒子
position属性设置位置,三个数字分别对应x,y,z三个方向
color属性赋予颜色
-->
<a-box position=