本文為A-Frame簡(jiǎn)明教程系列的第一篇孔厉，更多文章請(qǐng)參見專題。
A-Frame初體驗(yàn)
關(guān)于A-Frame
A-Frame是一個(gè)利用web技術(shù)創(chuàng)建虛擬現(xiàn)實(shí)的框架帖努，由moz://a維護(hù)支持撰豺。
盡管名字起的有點(diǎn)不著調(diào)，但是拼余，對(duì)于有著web編程背景的人來說污桦，上手容易，而且虛擬現(xiàn)實(shí)也是未來的趨勢(shì)匙监，A-Frame的確是值得一學(xué)凡橱。
讓我們一起來學(xué)習(xí)感受下。
簡(jiǎn)單案例-全景圖片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>360° Image</title>
<script src="http://cdn.bootcss.com/aframe/0.7.1/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-sky src="http://aframe.io/aframe/examples/boilerplate/panorama/puydesancy.jpg" rotation="0 -130 0"></a-sky>
</a-scene>
</body>
</html>
案例解析
跟其他的庫一樣亭姥，使用A-Frame最簡(jiǎn)單的方法是在head部分里引入JS庫稼钩，可以使用本地加載的方式，也可以使用CDN的方式达罗。
<script src="http://cdn.bootcss.com/aframe/0.7.1/aframe.min.js"></script>
接著变抽，我們就可以在網(wǎng)頁里使用A-Frame為所欲為啦。
全景圖片的案例里，我們其實(shí)只需要把全景圖片放到天空里就行啦绍载。
<a-scene>
<a-sky src="http://aframe.io/aframe/examples/boilerplate/panorama/puydesancy.jpg" rotation="0 -130 0"></a-sky>
</a-scene>
<a-scene></a-scene>用來創(chuàng)建一個(gè)場(chǎng)景诡宗。
<a-sky></a-sky>用來創(chuàng)建天空。
學(xué)習(xí)資源
敬請(qǐng)期待
稍微需要說句击儡，webvr方面目前只有firefox塔沃、chrome支持的較為好點(diǎn)。
本篇文章就是帶大家入個(gè)門阳谍，欲知后事如何蛀柴，敬請(qǐng)期待本系列教程。
聲明
愛前端矫夯，樂分享鸽疾。FedFun希望與您共同進(jìn)步。
歡迎任何形式的轉(zhuǎn)載训貌，煩請(qǐng)注明裝載制肮，保留本段文字。
獨(dú)立博客http://whqet.github.io
極客頭條http://geek.csdn.net/user/publishlist/whqet
CSDN博客http://blog.csdn.net/whqet/
我的簡(jiǎn)書http://www.reibang.com/u/c11d4318b3c7
