webVR全景图多种方案实现(pannellum,aframe,Krpano,three)

89317160 2018-11-08

前言

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

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

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

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

放一下源码:

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

webVR全景图多种方案实现(pannellum,aframe,Krpano,three)

第二种方案:aframe

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

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

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

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

优点:简单方便,一顿操作猛于虎

缺点:PC端不能放大缩小,移动端只能左右移动,不能放大缩小,不能上下滑动(此方案 凉凉 不符合需求)

webVR全景图多种方案实现(pannellum,aframe,Krpano,three)

<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>

webVR全景图多种方案实现(pannellum,aframe,Krpano,three)

webVR全景图多种方案实现(pannellum,aframe,Krpano,three)

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

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

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

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

webVR全景图多种方案实现(pannellum,aframe,Krpano,three)

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

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

江湖再见

第四种方案:pannellum(宛如我的救星,是国外的一个框架)

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

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

源码:引用同样是so easy!

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

优点:简单方便,一顿操作猛于虎

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

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

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

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

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

这一刻,我真的绝望了

webVR全景图多种方案实现(pannellum,aframe,Krpano,three)

绝望后,我再补充一下

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

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

好像这个框架图片算法处理的不够好(移动端),pc端很不错

我们老板的大光头 (我还是放图吧)

webVR全景图多种方案实现(pannellum,aframe,Krpano,three)

webVR全景图多种方案实现(pannellum,aframe,Krpano,three)

emmmmmmmmmmmmmmmmmmmmmmmmmm

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

webVR全景图多种方案实现(pannellum,aframe,Krpano,three)

<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>

webVR全景图多种方案实现(pannellum,aframe,Krpano,three)

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

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

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

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

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

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

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

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

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

简单原理:准备一张全景图,把全景图拖入它的工具中,

webVR全景图多种方案实现(pannellum,aframe,Krpano,three)

,生成一个文件夹,用

webVR全景图多种方案实现(pannellum,aframe,Krpano,three)

本地服务。完美

webVR全景图多种方案实现(pannellum,aframe,Krpano,three)

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

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

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

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

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

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

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

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

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

webVR全景图多种方案实现(pannellum,aframe,Krpano,three)

webVR全景图多种方案实现(pannellum,aframe,Krpano,three)

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

总结

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

并没有点击换下一个场景,但是我上面遇到的问题,这些解决了,才好解决接下来的坑

或许我们后期还会深入全景图

不过,前端还是可以分分钟钟在小程序,公众号 可以做到跨平台全景图

PC端的支持是最好的,移动端还是需要发展

就到这里吧!觉得可以的就点赞,有意见的在底下评论,不要喷的太厉害了,最近搞这个搞的头大。

相关推荐