【web全景】web全景实现方案（转载）

【原文地址】https://www.cnblogs.com/ifannie/p/9917490.html

前言

　　有一篇文章我说了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环境，然后返回给前端就好

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

　　20190921 补充

　　我们公司是买了技术支持的开通了会员（现在想想不太值得技术支持只有在我做全景VR视频的时候咨询过如何动态换视频地址）
　　会员的教程很久都没有更新了 17年有一些留言和回复 18 19年很少了。
　　英语能力好的建议直接看官方文档（就酱紫）

　　我这里面居然没有写如何做VR全景视频的后期可以来一篇　　

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

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

　　······~~~~

　　效果相当的满意，并且我们公司那些做场景的都用我的写的。啊幸福来得好突然

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

总结

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

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

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

【web全景】web全景实现方案（转载）相关推荐

实现Web虚拟现实的最轻松方案—A-Frame框架
问题随着vr的热度那么web虚拟现实是否可行 1. 实现Web虚拟现实的最轻松方案 A-Frame A-Frame是一款开源的可通过定制HTML元素构建WebVR方案的框架.有了这个框架,Web程序 ...
三种前端实现VR全景看房的方案！说不定哪天就用得上！(收藏)
前言事情是这样的,前几天我接到一个外包工头的新需求,某品牌要搭建一个在线VR展厅,用户可以在手机上通过陀螺仪或者拖动来360度全景参观展厅,这个VR展厅里会有一些信息点,点击之后可以呈现更多信息(视 ...
大规模 Web 数据采集的终极开源方案 - PulsarRPA
简介 PulsarRPA (国内镜像)是大规模采集 Web 数据的终极开源方案,可满足几乎所有规模和性质的网络数据采集需要. 大规模提取 Web 数据非常困难.网站经常变化并且变得越来越复杂,这意味着 ...
基于WEB 的实时事件通知方案
基于WEB 的实时事件通知方案基于 WEB 的实时事件通知方式大致有五种方案:HTTP拉取方式(pull),HTTP流,Long Polling,FlashXMLSocket方式,Java Appl ...
常见安全扫描软件web漏洞安全漏洞防护方案
1)常见安全扫描软件 2)常见web漏洞原理 3)SSL 自签名漏洞原理和解决方案 4)第三方插件漏洞原理和解决方案 1)常见安全扫描软件 HP WebInspect Nessua Burpsuit ...
基于FFmpeg和Wasm的Web端视频截帧方案
作者 | 小萱导读基于实际业务需求,介绍了自定义Wasm截帧方案的实现原理和实现方案.解决传统的基于canvas的截帧方案所存在的问题,更高效灵活的实现截帧能力. 全文10103字,预计阅读时间2 ...
Web开发种色系搭配方案和常用颜色码
在进行web开发或者小程序.APP时,如何获得赏心悦目的效果,获得领导和客户的青睐是广大程序员的急需解决的大问题.鄙人在网上找了一些资料,希望能帮到入门新手.色彩是直接能影响人的心情,不同的作品主题就 ...
Web应用国密改造方案
国密改造的背景一.网络安全形势不容乐观 1)网络安全事件日趋严重,HTTP网站存在被伪造.中间人劫持等安全风险 -美国白宫通过2015年<HTTPS-ONLY备忘录>达到政府类网站全覆盖 ...
python前端用什么架构_Python web世界观——web架构概览（适合传统软件工程师）...
Python web世界观--web架构概览(适合传统程序员) 传统web server面临的问题我们知道传统的web server,一个进程打开socket,监听,来了请求生成新的进程(或线程.或 ...
asp.net MVC3 无法打开项目文件“E:\我们的项目\Project\HeatingMIS.Web\HeatingMIS.Web.csproj”。此安装不支持该项目类型。...
在vs中打开mvc3项目,虽然装了mvc3,但是还是会遇到莫名其妙的错误,这是我在做开发的时候遇到的一个问题,附带解决方案,和大家分享一下问题描述:无法打开项目文件"E:\我们的项目\Pr ...

【web全景】web全景实现方案（转载）

【web全景】web全景实现方案（转载）相关推荐

最新文章

热门文章