A-Frame简明教程之初体验

r囧r小猫 2022-05-31 02:43 226阅读 0赞

> 本文为A-Frame简明教程系列文章的第一篇，大家可以到[专题][Link 1]里了解更多。

# A-Frame初体验 #

## 关于A-Frame ##

A-Frame是一个利用web技术创建虚拟现实的框架，由[moz://a][moz_a]维护支持。  
![这里写图片描述][aframe-name-pink.svg]  
尽管名字起的有点不着调，但是，对于有着web编程背景的人来说，上手容易，而且虚拟现实也是未来的趋势，A-Frame的确是值得一学。  
让我们一起来学习感受下。

## 简单案例-[全景图片][Link 2] ##

<!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的方式。

接着，我们就可以在网页里使用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>`用来创建一个[场景][Link 3]。  
`<a-sky></a-sky>`用来创建天空。

## 敬请期待 ##

稍微需要说句，webvr方面目前只有firefox、chrome支持的较为好点。  
本篇文章就是带大家入个门，欲知后事如何，敬请期待本系列教程。

[Link 1]: https://www.jianshu.com/c/254a5e9d2eb9
[moz_a]: https://www.mozilla.org
[aframe-name-pink.svg]: https://aframe.io/images/aframe-name-pink.svg
[Link 2]: https://codepen.io/whqet/pen/ddMEZV
[Link 3]: https://aframe.io/docs/0.7.0/core/scene.html