全景图制做详解

1、前言：偶然看到不少app内又不少关于全景图的页面，出于好奇很想看看怎么实现的。在安居客，以及汽车之家都看到过，先来2个他们的案例你们看看

某装修公司案例1，    汽车之家案例2

是否是眼前一亮，是否是也想看看他们到底怎么实现的。以前写过一个粗糙的关于three.js实现全景图的文章，相比之下上面的要流畅许多。感兴趣的先别往下看，根据上面的案例本身先去找找答案~。

2、案例1和案例2所用的技术以及若是制做

一、看案例中那复杂的代码不少人估计懵逼了，从代码中可以获得实际上是使用：https://krpano.com/ 处理的。

二、krpano这是个什么东西？其实就是一个软件，把全景图放进去自动生成代码。也就是说上面案例一、2中逻辑代码根本不须要本身手敲！！！！手敲也就是添加一些逻辑或者重置默认样式之类吧。

注：该软件正式使用须要购买，官方129欧元，折合RMB1千多，好像是购买一次终身使用，能够多带电脑同时使用~~使用非正式版的处理出来的全景图中间有logo，处处都是水印！如这个非正式版的DEMO，是否是很丑~~

三、以2中的DEMO为例来讲说怎么制做的，须要2点：a 处理软件(能够官方下载)，b 全景图若干

a:下载解压到本地后以下图

 

b:把准备好的全景图往红框中那些.bat 文件上面一拖，就自动生成页面代码了。。。。。

vtour文件夹就是自动生成的~内容如：

 

若是不须要添加功能啥的能够直接放在服务器就完事了~~~~上面那个非正式demo就是这样完成的！！没写一行代码~~~~~

目前尚未深刻去学习，只是了解个大概，若是实际中真的要用的话确定要深刻去了解的，目前还没找到比较完整的中文学习文档，这里有一个算是不错的，愿意深刻的猛戳这里

3、软件：pano2vr，该软件和上面的软件相似，导入全景图自动生成代码，非正式版本的有水印。

 

pano2的demo:  戳这里

 4、其余，第三方平台：720云

目前国内有个比较好的第三方专门搞这个，你只须要把全景图上传到该平台，就会自动生成一个全景图的做品连接给你。

好比我上传了一个全景图，该平台自动生成的做品连接：第三方生成的做品