webVR全景图多种方案实现（pannellum，aframe，Krpano，three,jquery-vrview）

2022-03-29 20:16:30

前言

　　有一篇文章我说了H5实现全景图预览，全景视频播放的原理，有需要的小伙伴可以自行去看一下

　　今天我就拿出我的实践干货出来，本人实测实测过

需求

　　老板：我需要可以上传全景图片，然后手机网站上都可以360度看全景图

需求分析

　　一个上传功能

　　一个全景360度预览功能

正文

　　H5 上传功能就不说了，或下一篇文章说。

　　H5 有几种方式实现呢？

第一种方案：three.js(大哥出山吧)

　　作为前端界全景、3D大哥，大哥请开始你的表演

　　官方地址：https://threejs.org/

　　官方案例：https://threejs.org/examples/#css3d_panorama

　　源码：简单，引入three，引入3d

　　实现：2:1的全景在PC端，可以预览，左右上下鼠标移动

　　优点：aaaaa,我说不出口

　　缺点：PC端不能放大缩小，图片需要裁剪六张，移动端，不能放大缩小，更加糟糕的是渲染滴很差，截图为证，手机也是如此（此方案凉凉不符合需求）

　　大哥，就这样跪了吗？我没有深入的研究three，可能他的强大我没有用上吧

　　刚开始我用的是，node+three 竟然没有 CSS3DRenderer 安装包，只有2D的并且引用three 也是报各种错误

　　放一个我引入成功的示范：import * as THREE from "three";

　　官方实例的静态页面，跟官方一个效果，但是不是我想要的；我不想切六张图，还有渲染也不好，图中出现黑色这是我们老板打死也不能接受的。是我没有深入了解

　　本例子，不接受反驳，有能力的自己去研究。反正我是没有这个本事

　　总之，这个我能力不够，搞不定

　　放一下源码：

　　貌似有点多啊~ 你们还是去官网找吧，找不到私信一下

第二种方案：aframe

　　官方地址：https://aframe.io/

　　官方案例：https://aframe.io/examples/showcase/sky/

　　源码：真是太简单了，引入aframe 框架, <a-sky></a-sky>

　　实现：2:1的全景在PC端，可以预览，左右上下鼠标移动，还支持VR模式，

　　优点：简单方便，一顿操作猛于虎

　　缺点：PC端不能放大缩小，移动端只能左右移动，不能放大缩小，不能上下滑动（此方案凉凉不符合需求）

<html>

  <head>

    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>

  </head>

  <body>

    <body>

    <a-scene>

      <a-sky src="img/po.jpg" rotation="0 -130 0"></a-sky>

    </a-scene>

    </body>

  </body>

</html>

第三种方案：jQuery 插件——vrview

　　是时候要我们的jQuery大哥出场了，万能的插件快来解救我吧！！！

　　尝试了大概不下五个插件，效果都不尽人意，

　　不是打不开，就是不太符合我的需求，还有就是像素加载处理很差

　　看到这里是不是很绝望，反正我是的（引入jQuery 代码都不想放出来了你们自己找吧，无非就是引用插件引用图片）

　　希望大家可以找到符合你们需求的插件吧

　　江湖再见

第四种方案：pannellum（宛如我的救星，是国外的一个框架）

　　官方地址：https://pannellum.org/

　　官方案例：https://pannellum.org/documentation/overview/

　　源码：引用同样是so easy！

　　实现：2:1的全景在PC端，可以预览，左右上下鼠标移动，能够放大缩小，移动端也完美具备这些需求，完全符合我的需求，跪谢

　　优点：简单方便，一顿操作猛于虎

　　缺点：由于webGL的限制，图片宽度最大限制是4086，图片由于灯光有点失真，更加悲剧的是放大的时候，有锯齿（图片裁剪算法问题）

　这都差不多了，但是新的问题好像很难啊

　　用了很渣的英文问了作者，作者告知是图片裁剪算法问题

　　厚着脸皮要后端小哥哥，用bicubic和 Lanczos 帮我裁剪图片

　　然而事实，在移动端有锯齿，特别的失真（哇的哭了，老板然后各种发移动端别人做的没有锯齿的网页版全景图）

　　这一刻，我真的绝望了

　　绝望后，我再补充一下
　　

　　我用了4096 没有裁剪的图，其实图片还是有锯齿的（放大最大限度）怎么表达这个锯齿呢（像素）

　　你肯定会想说放大图片本来就有像素点啊！

　　好像这个框架图片算法处理的不够好（移动端），pc端很不错

　　我们老板的大光头（我还是放图吧）

　　emmmmmmmmmmmmmmmmmmmmmmmmmm

　　再怎么说，代码还是要贴出来

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title></title>

    <link rel="stylesheet" href="js/pannellum.css"/>

    <script type="text/javascript" src="js/pannellum.js"></script>

    <style>

    #panorama {

        width: 100%;

        height: 100%;

    }

    *{

      margin:0;

      padding:0;

    }

    </style>

</head>

<body>

<div id="panorama"></div>

<!-- <canvas id="canvas" style="display:none"></canvas> -->

<script>

    pannellum.viewer('panorama', {

        "type": "equirectangular",

        "panorama": url,

        "autoLoad": true,

    });

</script>

</body>

</html>