本文为A-Frame简明教程系列的第一篇，更多文章请参见专题。
A-Frame初体验
关于A-Frame
A-Frame是一个利用web技术创建虚拟现实的框架，由moz://a维护支持。
尽管名字起的有点不着调，但是，对于有着web编程背景的人来说，上手容易，而且虚拟现实也是未来的趋势，A-Frame的确是值得一学。
让我们一起来学习感受下。
简单案例-全景图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>360° Image</title>
<script src="//cdn.bootcss.com/aframe/0.7.1/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-sky src="//aframe.io/aframe/examples/boilerplate/panorama/puydesancy.jpg" rotation="0 -130 0"></a-sky>
</a-scene>
</body>
</html>
案例解析
跟其他的库一样，使用A-Frame最简单的方法是在head部分里引入JS库，可以使用本地加载的方式，也可以使用CDN的方式。
<script src="//cdn.bootcss.com/aframe/0.7.1/aframe.min.js"></script>
接着，我们就可以在网页里使用A-Frame为所欲为啦。
全景图片的案例里，我们其实只需要把全景图片放到天空里就行啦。
<a-scene>
<a-sky src="//aframe.io/aframe/examples/boilerplate/panorama/puydesancy.jpg" rotation="0 -130 0"></a-sky>
</a-scene>
<a-scene></a-scene>用来创建一个场景。
<a-sky></a-sky>用来创建天空。
学习资源
敬请期待
稍微需要说句，webvr方面目前只有firefox、chrome支持的较为好点。
本篇文章就是带大家入个门，欲知后事如何，敬请期待本系列教程。
声明
爱前端，乐分享。FedFun希望与您共同进步。
欢迎任何形式的转载，烦请注明装载，保留本段文字。
独立博客http://whqet.github.io
极客头条http://geek.csdn.net/user/publishlist/whqet
CSDN博客http://blog.csdn.net/whqet/
我的简书https://www.jianshu.com/u/c11d4318b3c7
网友评论