webVR全景图多种方案实现（pannellum，aframe，Krpano，three,jquery-vrview）
前言
有一篇文章我说了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端的支持是最好的，移动端还是需要发展
就到这里吧！觉得可以的就点赞，有意见的在底下评论，不要喷的太厉害了，最近搞这个搞的头大。
webVR全景图多种方案实现（pannellum，aframe，Krpano，three,jquery-vrview）的更多相关文章
- JS实现单例模式的多种方案
JS实现单例模式的多种方案 今天在复习设计模式中的-创建型模式,发现JS实现单例模式的方案有很多种,稍加总结了一下,列出了如下的6种方式与大家分享 大体上将内容分为了ES5(Function)与ES6 ...
- 真正高效的SQLSERVER分页查询(多种方案)
Sqlserver数据库分页查询一直是Sqlserver的短板,闲来无事,想出几种方法,假设有表ARTICLE,字段ID.YEAR...(其他省略),数据53210条(客户真实数据,量不大),分页查询 ...
- Java 将字节数组转化为16进制的多种方案
很多时候我们需要将字节数组转化为16进制字符串来保存,尤其在很多加密的场景中,例如保存密钥等.因为字节数组,除了写入文件或者以二进制的形式写入数据库以外,无法直接转为为字符串,因为字符串结尾有\0,当 ...
- PHP开发中多种方案实现高并发下的抢购、秒杀功能
抢购.秒杀是如今很常见的一个应用场景,主要需要解决的问题有两个: 1 高并发对数据库产生的压力 2 竞争状态下如何解决库存的正确减少("超卖"问题) 对于第一个问题,已经很容易想到 ...
- 同步或者重构Activiti Identify用户数据的多种方案比较
http://www.kafeitu.me/activiti/2012/04/23/synchronize-or-redesign-user-and-role-for-activiti.html 如何 ...
- JS在线代码编辑器多种方案monaco-editor，vue-monaco-editor
前言 JavaScript在线代码编辑器. 需要代码提示,关键字高亮,能够格式化代码.(不需要在线运行) 简简单单的需求. 方案一: Monaco-editor 简介:微软的开源项目,开源中国上面的在 ...
- css input checkbox复选框控件 样式美化的多种方案
checkbox复选框可能是网站中常用的html元素,但大多数人并不满意它的默认样式,这篇文章就讲讲如何实现input checkbox复选框控件 样式美化效果. 资源网站大全 https://55w ...
- ASP.NET、C#调用外部可执行exe文件--多种方案
一. try { //方法一 //调用自己的exe传递参数 //Process proc = new Process(); //proc.StartInfo.FileName = @"D:\ ...
- Java中监控文件变化的多种方案
一.使用Apache.Common.io库 package yungoal.huafeng.utils.files; import com.sun.deploy.util.SyncFileAccess ...
随机推荐
- 安装并使用pt-ioprofile
pt-ioprofile,是一个percona的性能分析工具,可以查看进程输出.输入,打印一些表文件及活动IO.pt-ioprofile是一个只读工具,所以对数据没风险.由于网上对pt-ioprofi ...
- 单例模式实现 Volitile ， interlocked
//单例模式: //1. 双检锁机制 Volatile.write() //2. 静态变量 //3. Interlocked.CompareExchange(ref single, temp, nul ...
- 插入图片新方式：data:image
我们在使用<img>标签和给元素添加背景图片时,不一定要使用外部的图片地址,也可以直接把图片数据定义在页面上.对于一些“小”的数据,可以在网页中直接嵌入,而不是从外部文件载入. 如何使用 ...
- MySQL: Connection Character Sets and Collations
character_set_server collation_servercharacter_set_databasecollation_database character_set_clientch ...
- 转：sqlserver 临时表、表变量、CTE的比较
1.临时表 1.1 临时表包括:以#开头的局部临时表,以##开头的全局临时表. 1.2 存储 不管是局部临时表,还是全局临时表,都会放存在tempdb数据库中. 1.3 作用域 局部临时表:对当前连接 ...
- sqlserver性能调优中的逻辑读，物理读，预读是什么意思
表 'T_EPZ_INOUT_ENTRY_DETAIL'.扫描计数 1,逻辑读 4825 次,物理读 6 次,预读 19672 次.SQL SERVER 数据库引擎当遇到一个查询语句时,SQL SER ...
- 【转】Java学习---内存泄露与溢出的区别
Java内存泄露与溢出的区别 Java内存泄漏就是没有及时清理内存垃圾,导致系统无法再给你提供内存资源(内存资源耗尽): 而Java内存溢出就是你要求分配的内存超出了系统能给你的,系统不能满足需求,于 ...
- Ubuntu集群 配置ntp服务
1.概述 NTP(Network Time Protocol)是用来使计算机时间同步化的一种协议,它可以使计算机对其服务器或时钟源(如石英钟,GPS等等)做同步化,它可以提供高精准度的时间校正(LAN ...
- 2.Dubbo2.5.3注册中心和监控中心部署
转载请出自出处:http://www.cnblogs.com/hd3013779515/ 1.注册中心Zookeeper安装 (1)搭建要求 zk服务器集群规模不小于3个节点要求各服务器之间系统时间要 ...
- pdf阅读器开发
文章基于sumatrapdf的实现(当中mupdf中的内容不会太多涉及).以及自己在此基础上做的 优化,扩展.详细效果能够參考百度阅读器精简版. 最NB的还是得属于foxit.渲染速度一流,展示大图片 ...