Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

A-Frame简明教程之A-Frame初体验 #3

Open
zptcsoft opened this issue Feb 12, 2018 · 0 comments
Open

A-Frame简明教程之A-Frame初体验 #3

zptcsoft opened this issue Feb 12, 2018 · 0 comments

Comments

@zptcsoft
Copy link
Owner

本文为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>用来创建天空。

学习资源

  1. 官方网站
  2. 官方文档
  3. 官方Github
  4. A-Frame 學院
  5. 中文文档

敬请期待

稍微需要说句,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

@zptcsoft zptcsoft changed the title A-Frame初体验 A-Frame简明教程之A-Frame初体验 Feb 12, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant