WebVR全景图多种JS框架实现方案---kalrry---test--ing
前言
参考
待验证ing 参考： [1]、https://www.cnblogs.com/ifannie/p/9910736.html [2]、https://www.cnblogs.com/ifannie/p/9917490.html 结论： 看完直接上Krpano
第一种方案：three.js
第二种方案：aframe
官方地址：https://aframe.io/ 官方案例：https://aframe.io/examples/showcase/sky/ 源码：真是太简单了，引入aframe 框架, 实现：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
第四种方案：pannellum
官方地址：https://pannellum.org/ 官方案例：https://pannellum.org/documentation/overview/ 源码：引用同样是so easy！ 实现：2:1的全景在PC端，可以预览，左右上下鼠标移动，能够放大缩小，移动端也完美具备这些需求，完全符合我的需求
优点：简单方便，一顿操作猛于虎 缺点：由于webGL的限制，图片宽度最大限制是4086，图片由于灯光有点失真，更加悲剧的是放大的时候，有锯齿（图片裁剪算法问题） 这个框架图片算法处理的不够好（移动端），pc端很不错
<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
官方地址：https://krpano.com/ 中文教程：http://www.krpano360.com/
实现：2:1的全景在PC端，可以预览，左右上下鼠标移动，能够放大缩小，移动端也完美具备这些需求，完全符合我的需求，并且没有锯齿 跟着教程走一遍，你就知道原理了 简单原理：准备一张全景图，把全景图拖入它的工具中
