Web实现全景图的交互展示
- 不需要学习其他知识，小白也能实现全景图AR展示
- 一、webVR全景图多种方案实现（aframe，Krpano，three,jquery-vrview等等）
- 二、用krpano之前的一些知识准备
- 三、krpano的购买、下载、注册
- 四、做一个简单的漫游全景图
- 五、总结
不需要学习其他知识，小白也能实现全景图AR展示
自己对于we前端开发来说也属于新手，这也是本人接到的第一个项目技术要求，尝试了许多次也算有个折磨的过程，我的失败经验应该能解决大部分人对于全景图的展示：
一、webVR全景图多种方案实现（aframe，Krpano，three,jquery-vrview等等）
- 第一种方案：three.js 作为作为前端界全景、3D大哥，无论是哪里搜索，只要搜索全景的插件，都会搜到这位大哥。
官方地址：three.js官网
官方学习地址：https://threejs.org/examples/#css3d_panorama
源码：简单，引入three，引入3d
实现：2:1的全景在PC端，可以预览，左右上下 鼠标移动
优点：可调节细节比较多，对于技术大佬这才是展示拳脚的地方。
缺点：PC端不能放大缩小，图片需要裁剪六张，移动端，不能放大缩小，更加糟糕的是渲染滴很差，手机也是如此（也有可能是我技术不到位）
（因为尝试了几个效果都不好，而且代码也比较长，有需要的可以去官网看看，讲的也很详细） - 第二种方案：A-frame
官方地址：A-frame官方地址
官方案例：案例展示
源码：真是太简单了，引入aframe 框架<a-sky></a-sky>
实现：2:1的全景在PC端，可以预览，左右上下 鼠标移动，还支持VR模式。
优点：简单方便，就真的操作无脑
缺点：PC端不能放大缩小，移动端只能左右移动，不能放大缩小，不能上下滑动
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script><title>Document</title>
</head>
<body><a-scene><a-sky src="./img/2.jpg"></a-sky></a-scene>
</body>
</html>
个人觉得aframe是一个非常好用得插件，提供了新的标签以后，就可以更通过CSS即可修饰，对于一些像我这样的JS基础不强的人来说还是非常友好，但是确定pc端和移动端不能放大缩小的缺点不能达到项目要求。
3. 第三种方案：krpano 是看了很多大佬的意见，一开始也觉得很难，因为听说还需要使用xml来使用，但是实际操作起来并不难甚至对于简单的漫游来说，简直是傻瓜式操作，并且这个比起之前的终于能实现要求了！！！（下面我也会详细讲讲如何实现）
官方地址：https://krpano.com/
中文教程：http://www.krpano360.com/
实现：2:1的全景在PC端，可以预览，左右上下鼠标移动，能够放大缩小，移动端也完美具备这些需求，完全符合我的需求，并且没有锯齿
优点：能满足大部分对于全景图的需求，对接简单的漫游，傻瓜式操作，有个类似图形化界面工具，可以直接添加热点（720云的底层也是用krpano写的）
缺点：首先就是这款是付费的，而且159欧元的价格，换算人民币就是1300+，还是让不少人劝退的，其次就是很多都是插件包自带的脚本，相当于一个成熟的商品，可修改性就很差。
二、用krpano之前的一些知识准备
xml文件是什么？
很多人和接触过一些前端知识的人都会拿xml和html做一个比较，我这里就主要讲一下这二者的一下区别和联系把：
1、XML不是用来替换HTML的技术；
2、XML和HTML为不同的目的而设计；
3、XML设计的核心是包含和传输数据，而HTML设计的核心是显示数据。
然后我自己也查看了一些资料，有一位大佬写的笔记写的很好，想深入学习的朋友可以看看哦。
三、krpano的购买、下载、注册
购买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
<plugin name="skin_gyro" keep="true" url="%SWFPATH%/plugins/gyro.js" enabled="false" camroll="true" friction="0" velastic="0" onavailable="set(layer[skin_btn_gyro].visible,true); skin_onresize();" />
最后，这是本人第一次写博客，自己也不是什么前端大佬，如果有错误得地方多多包涵，欢迎指点，路过的大佬不喜勿喷。
