A-Frame简明教程之初体验

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/whqet/article/details/79258347

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

A-Frame初体验

关于A-Frame

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

简单案例-全景图片

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>360&deg; 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支持的较为好点。
本篇文章就是带大家入个门,欲知后事如何,敬请期待本系列教程。

猜你喜欢

转载自blog.csdn.net/whqet/article/details/79258347
今日推荐