VR探索之——aframe框架在浏览器显示全景照片

最新推荐文章于 2024-03-21 17:07:39 发布

SundayAaron

最新推荐文章于 2024-03-21 17:07:39 发布

阅读量5.8k

点赞数 3

分类专栏： vr探索文章标签：经验分享

本文链接：https://blog.csdn.net/SundayAaron/article/details/53893303

版权

vr探索专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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
结果正常显示：
这里写图片描述