aframe介绍:
A-Frame是一款开源的可通过定制HTML元素构建WebVR方案的框架。
github开源地址:https://github.com/aframevr/aframe/
前几天公司项目中需要vr图片预览功能,所以我就开始研究一下如何在浏览器和手机端显示全景图片。
在百度中找到了 aframe框架,看了官网的demo ,仅需几行代码就可以实现,太高大上了。所以就把经验分享给大家。
先看下官网上的预览效果:
PC上 鼠标可以上下左右拖动显示,还可以全屏显示。
查看下源码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Panorama</title>
<meta name="description" content="Panorama — A-Frame">
<script src="../../../dist/aframe.js"></script>
</head>
<body>
<a-scene>
<a-sky src="puydesancy.jpg" rotation="0 -130 0"></a-sky>
</a-scene>
</body>
</html>
怎么样 非常简单吧,引用一个js文件,再引入全景图片。就OK了。
本地实现:
接下来到本机实际测试一下,到github上下载了源码。
新建一个文件夹vrtest,目录结构如下
index.html源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="aframe.js"></script>
</head>
<body>
<a-scene>
<a-sky src="puydesancy.jpg" rotation="0 -130 0"></a-sky>
</a-scene>
</body>
</html>
效果预览:
接下来看下效果,直接打开index.html。结果发现是大白页
why? 因为需要有环境才可以,所以在本地启动apache服务器,我这里是用的xampp,把vrtest文件夹放到xampp文件夹下的htdoc目录,然后在浏览器中输入地址:127.0.0.1/vrtest/index.html
结果正常显示:
当然,也可以使用另外一种简单方法。用webstorm编辑器预览,自动生成环境
正常显示:
手机端支持效果:IOS10.2 Safari浏览器测试正常 可以重力感应+陀螺仪摇动手机显示
demo源码下载地址:http://download.csdn.net/detail/sundayaaron/9722095
个人微信公众号:
如果我的文章对您有帮助,微信支付宝打赏: