webVR全景图多种方案实现(pannellum,aframe,Krpano,three,jquery-vrview)
2019-11-18

前言

  有一篇文章我说了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>

 

第五种方案:Krpano(大哥 真的就靠你了)

  吃完饭,左思右想。我还是换一种方案吧(我们老板坚决不接受锯齿)

  啊啊啊啊啊啊~我记得Krpano 是要用工具才可以的啊

  听说上手很难啊~xml 写的 收费的

 

  官方地址:https://krpano.com/

  中文教程:http://www.krpano360.com/

  实现:2:1的全景在PC端,可以预览,左右上下鼠标移动,能够放大缩小,移动端也完美具备这些需求,完全符合我的需求,并且没有锯齿

   跟着教程走一遍,你就知道原理了

  然后呢,自己跑一个案例,其实非常的简单,我觉得,之前都是谣言

  简单原理:准备一张全景图,把全景图拖入它的工具中,,生成一个文件夹,用本地服务。完美

  

   开开心心到这里,发现事情并没有这么简单

  这是静态图片的制作,我是动态图片啊~用户上传的全景图啊(我滴个乖乖)

  恩,不能慌这个时候,我理一下思路(关键字是,Krpano功能化,你会发现其实很多全景图公司 底层都是用Krpano)

  第一种:用户上传,拿到上传到了服务器的地址,用node下载下来图,node操作.bat 生成文件夹,然后把整个文件夹提交到服务器~这样子 貌似资源消耗很大啊

  第二种:我看到官方有linux版本,java来实现更好。前端只负责上传,返回html,跳转

      后端在linux部署Krpano环境,然后返回给前端就好

  我们公司采用的是第二种,后端来处理这些,我前端突然不用做什么了(一脸懵逼 一脸懵逼 再加上生无可恋啊)

  

  但是最终是解决了这些问题,也可以说是什么都没有解决

  今天下午老板拿出去 吹牛逼了,不知道效果如何(保佑我 阿门)

  

 

  

 

  全景图,我来来回回,把网上的资料都翻遍了。你要是有什么其他难点,说不定我看见过解决方案,也可以一起交流

总结

  fannie式总结,全景图大概就说这些,我这些还是很简单的使用全景图,静态引用

  并没有点击换下一个场景,但是我上面遇到的问题,这些解决了,才好解决接下来的坑  或许我们后期还会深入全景图

  不过,前端还是可以分分钟钟在小程序,公众号 可以做到跨平台全景图  PC端的支持是最好的,移动端还是需要发展  就到这里吧!觉得可以的就点赞,有意见的在底下评论,不要喷的太厉害了,最近搞这个搞的头大。