webVR全景图多种方案实现(pannellum,aframe,Krpano,three,jquery | 您所在的位置:网站首页 › 图片查看在线网站 › webVR全景图多种方案实现(pannellum,aframe,Krpano,three,jquery |
前言 有一篇文章我说了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 框架, 实现:2:1的全景在PC端,可以预览,左右上下 鼠标移动,还支持VR模式, 优点:简单方便,一顿操作猛于虎 缺点:PC端不能放大缩小,移动端只能左右移动,不能放大缩小,不能上下滑动(此方案 凉凉 不符合需求)
第三种方案: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 再怎么说,代码还是要贴出来 #panorama { width: 100%; height: 100%; } *{ margin:0; padding:0; } pannellum.viewer('panorama', { "type": "equirectangular", "panorama": url, "autoLoad": true, });
第五种方案:Krpano(大哥 真的就靠你了) 吃完饭,左思右想。我还是换一种方案吧(我们老板坚决不接受锯齿) 啊啊啊啊啊啊~我记得Krpano 是要用工具才可以的啊 听说上手很难啊~xml 写的 收费的
官方地址:https://krpano.com/ 中文教程:http://www.krpano360.com/ 实现:2:1的全景在PC端,可以预览,左右上下鼠标移动,能够放大缩小,移动端也完美具备这些需求,完全符合我的需求,并且没有锯齿 跟着教程走一遍,你就知道原理了 然后呢,自己跑一个案例,其实非常的简单,我觉得,之前都是谣言 简单原理:准备一张全景图,把全景图拖入它的工具中, 开开心心到这里,发现事情并没有这么简单 这是静态图片的制作,我是动态图片啊~用户上传的全景图啊(我滴个乖乖) 恩,不能慌这个时候,我理一下思路(关键字是,Krpano功能化,你会发现其实很多全景图公司 底层都是用Krpano) 第一种:用户上传,拿到上传到了服务器的地址,用node下载下来图,node操作.bat 生成文件夹,然后把整个文件夹提交到服务器~这样子 貌似资源消耗很大啊 第二种:我看到官方有linux版本,java来实现更好。前端只负责上传,返回html,跳转 后端在linux部署Krpano环境,然后返回给前端就好 我们公司采用的是第二种,后端来处理这些,我前端突然不用做什么了(一脸懵逼 一脸懵逼 再加上生无可恋啊)
20190921 补充 我们公司是买了技术支持的 开通了会员(现在想想 不太值得 技术支持只有在我做全景VR视频的时候 咨询过如何动态换视频地址) 会员的教程 很久都没有更新了 17年有一些留言和回复 18 19年 很少了。 英语能力好的 建议直接看官方文档(就酱紫) 我这里面居然没有写如何做VR全景视频的 后期可以来一篇
但是最终是解决了这些问题,也可以说是什么都没有解决 今天下午老板拿出去 吹牛逼了,不知道效果如何(保佑我 阿门) ······~~~~ 效果相当的满意,并且我们公司那些做场景的都用我的写的。啊 幸福来得好突然
全景图,我来来回回,把网上的资料都翻遍了。你要是有什么其他难点,说不定我看见过解决方案,也可以一起交流 总结 fannie式总结,全景图大概就说这些,我这些还是很简单的使用全景图,静态引用 并没有点击换下一个场景,但是我上面遇到的问题,这些解决了,才好解决接下来的坑 或许我们后期还会深入全景图 不过,前端还是可以分分钟钟在小程序,公众号 可以做到跨平台全景图 PC端的支持是最好的,移动端还是需要发展 就到这里吧!觉得可以的就点赞,有意见的在底下评论,不要喷的太厉害了,最近搞这个搞的头大。
|
CopyRight 2018-2019 实验室设备网 版权所有 |