全景图制作详解

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

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

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

二、案例1和案例2所用的技术以及如果制作

1、看案例中那复杂的代码很多人估计懵逼了，从代码中能够得到其实是使用：https://krpano.com/ 处理的。

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

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

3、以2中的DEMO为例来说说怎么制作的，需要2点：a 处理软件(可以官方下载)，b 全景图若干

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

 

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

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

 

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

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

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

 

pano2的demo:  戳这里

 四、其他，第三方平台：720云

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

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