刚发布不久的博文，就有那么多的阅读量和点赞量，谢谢大家的支持(^-^)
一下子有了好大动力哦（笑）。
那就再更新吧。
1 效果展示
这次的代码是A-Frame的官方示例代码，那我来给大家解读一下。
废话不说，上代码。
<html>
<head>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>这个代码可以在AFrame网站找到。 在你的电脑里创建一个文件夹，里面创建aframeDemo.html，并用记事本（或其他文件编辑软件）打开，将上面的代码复制进去。
打开的效果是这样的：
是不是很丝滑？^_^
注意，这个代码没有使用<meta charset="utf-8">，这是可以的，因为整个页面没有使用中文字符库，也就没有必要指定。
另外说一点：由于这个页面内嵌了AFrame的javascript文件，每次访问都需要向aframe服务器发出请求，所以加载速度可能会受到影响，甚至是加载不出来。你可以下载AFrame的JS文件，放到aframeDemo.html所在文件夹中。并将head中的script替换成以下内容：
<script src="./aframe.min.js"></script>如果文件存在，那么效果是一样的，否则会出现无法渲染，且404的警告。
2 解读球形
a-box我们已经讲过了，就是那个蓝色的。
接下去我们讲红色的球形。
它的元素叫a-sphere。
它接受的参数和a-box略有不同，最大的变化就是radius。
radius就是半径，单位为AFrame视角的一个单位。
其他的position，color，跟a-box是一样的。
上一次还漏说了一点，position是整个模型最中心点，比如sphere就是圆心。制作模型时，要计算好位置哦，不然可能会乱套。
其他参数见下表。
因为球形怎么转也是一样的，所以他没有rotation参数。
3 解读圆柱形
圆柱形是a-cylinder，黄的那个。
它既有a-box的height，也有a-sphere的radius，分别负责高和截面的半径。
它的参数表如下：
哦对了，有些同学可能会抱怨：“每次 要显示一个不同的颜色，都得试它的RGB值，太麻烦了！”
其实AFrame的开发者们已经想到了，AFrame提供了很多的颜色预设。你只需要知道一个颜色的英文，放在color里，就能识别。
4 解读平面
平面是a-plane，能显示类似一块板的形状。
a-plane的大小设定又与a-box不一样。它将width作为长，height作为宽，没有depth。
参数表：
你可以结合这些形状，做一个属于你自己的VR环境。
5 背景色
差点忘记了，还有个元素叫a-sky。a-sky可以接受一个颜色，也可以接受一张纹理图片（texture）。这一点，我们下一次再讲。
好了，希望你玩得开心！
（版权声明：文章内容为原创，代码和参数表格由A-Frame提供，可以在A-Frame网站aframe.io找到）
扫一扫
2927
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
