自己对于we前端开发来说也属于新手，这也是本人接到的第一个项目技术要求，尝试了许多次也算有个折磨的过程，我的失败经验应该能解决大部分人对于全景图的展示：

个人觉得aframe是一个非常好用得插件，提供了新的标签以后，就可以更通过CSS即可修饰，对于一些像我这样的JS基础不强的人来说还是非常友好，但是确定pc端和移动端不能放大缩小的缺点不能达到项目要求。 3. 第三种方案：krpano 是看了很多大佬的意见，一开始也觉得很难，因为听说还需要使用xml来使用，但是实际操作起来并不难甚至对于简单的漫游来说，简直是傻瓜式操作，并且这个比起之前的终于能实现要求了！！！（下面我也会详细讲讲如何实现） 官方地址：https://krpano.com/ 中文教程：http://www.krpano360.com/ 实现：2:1的全景在PC端，可以预览，左右上下鼠标移动，能够放大缩小，移动端也完美具备这些需求，完全符合我的需求，并且没有锯齿 优点：能满足大部分对于全景图的需求，对接简单的漫游，傻瓜式操作，有个类似图形化界面工具，可以直接添加热点（720云的底层也是用krpano写的） 缺点：首先就是这款是付费的，而且159欧元的价格，换算人民币就是1300+，还是让不少人劝退的，其次就是很多都是插件包自带的脚本，相当于一个成熟的商品，可修改性就很差。

xml文件是什么？ 很多人和接触过一些前端知识的人都会拿xml和html做一个比较，我这里就主要讲一下这二者的一下区别和联系把： 1、XML不是用来替换HTML的技术；

2、XML和HTML为不同的目的而设计；

3、XML设计的核心是包含和传输数据，而HTML设计的核心是显示数据。 然后我自己也查看了一些资料，有一位大佬写的笔记写的很好，想深入学习的朋友可以看看哦。

购买krpano 购买前需要一张双币信用卡或者paypal账户（类似我们的支付宝） 进入购买的官网：(https://krpano.com/buy) 这里的159欧元的是基础内核款的，项目在各种设备上包括手机浏览器上都是没有问题的。 首次购买购买基础款就可以拉，如果有必要在购买去除右侧菜单中krpano版权信息的299欧元。 输入邮件地址这个很重要，你购买以后官方会通过邮箱将注册码发给你。 （看不懂英文的小伙伴，krpano官网都是支持英汉互译，谷歌浏览器在右上方） 下载krpano 直接进入官网：https://krpano.com/download/ 可以看到win、osx、Linux三大主流版本的压缩包，我的是win64位，就直接下载了（由于是外国网站，下载速度比较慢） 注册krpano 这里需要注意的一点，之所以需要购买注册码，也就是区分用户，也就是如果你所使用的krpano程序当前所登录的系统用户没有注册，就会有很明显的水印（这也是本人一开始和很绝望的一点） 打开下载的安装包解压，在文件中找到krpano Tools.exe 只要是新版本都会弹出一个输入注册码的框，直接复制官方邮箱发你的拿一串东西就好了 更详细的步骤可以看http://www.krpano360.com/buykrpano/

弄好一切以后呢，就开始我们使用这个插件的环节拉，首先，得去找度娘找几张全景图（这里的全景图最好是2：1的） 以win32位为例，解压好的文件夹可以看到很多个bat文件，具体的实现功能我就直接截图拉 这里官方建议是使用MAKE VTOUR (VR-OPT) droplet.bat，直接将找好的图片拖入这个指令程序中。 则会弹出命令提示符窗口，有些电脑会直接执行，并且生成一个文件夹，而我的电脑需要完成几个指令 完成这些以后，我们就可以打开生成的文件夹（文件夹的名字不一定会小编的一样），点击里面的

如果点击了html文件也没有关系，找到最开始的krpano文件夹，找到krpano Testing Server.exe直接启动 当启动打开网页就可以看到展示的图片拉 由于小编也是没有钱，并未购买，所以可以看到还是有很多水印的，但是基本的功能是可以实现的 如果没有看懂的小伙伴这里有个视频讲解欢迎食用哦https://haokan.baidu.com/v?vid=3791900632166741117&pd=bjh&fr=bjhauthor&type=video 当然这个时候就会有人问，热点是如何实现的呀（这里的热点是全景图的一个叫法，其实就是一个光标，比如跳转到下一张图的工具），由于小编也是没有购买，所以其实这个功能是购买注册码以后是可以实现的，如果购买了注册码在生成文件夹里面会多带有一个生成文件夹名_editor.html文件，这个里面会直接由图形化界面工具，是可以添加热点的。 也可也去看看购买注册码后的视频展示：https://v.qq.com/x/page/m0133n9wcka.html

1.关于软件注册码付费问题 其实大家都看到了krpano的功能应该都是有小小的心动，但是价格确实让人劝退，我看了很多资料，其实是由破解版本和低价购买的方式的，后期我会专门更新一篇博客。 2.代码端问题 可能很多小伙伴作为程序员，看到这么简单的操作，都会觉得好像没有啥挑战性，也体现不出自己的技术，关于这块，其实还是会由代码端的操作，而且就是前面所说的xml文件的操作，其实krpano这款插件有点类似MYSQL数据库又有图形化界面工具也有代码端输入输出，后续我继续出关于这款全景图的使用经验，这也是我以后的一个方向。 3.自己总结的全景图三个核心问题 全景图片的调节问题：对于一个做产品，就得想到怎么样让自己的团队，以及客户更加简单高效的完成一个项目，而这个全景图的拍摄不可能每次都会像百度搜索的刚好2：1，而前端工程师能不能使用css样式就可以完成这样的调节。（当然如果我想到了也会分享给大家） 热点的安放和交互问题：做一个全景场景不可能是单单的一张图片，如果使用自己熟悉的插件或者语言实现就是一个重要的内容。 关于热点跟踪问题：现在的webAR.js和最新版本的three.js都是可以实现追踪效果的，而krpano也是可以的 关于移动端用到陀螺仪和重力感应：这个可以直接使用插件gyro.js

最后，这是本人第一次写博客，自己也不是什么前端大佬，如果有错误得地方多多包涵，欢迎指点，路过的大佬不喜勿喷。