本文已参与「新人创作礼」活动,一起开启掘金创作之路。
前言
参考
待完善验证---ing
参考:
1参考
2参考
结论:
看完直接上Krpano
第一种方案:three.js
作为前端界全景、3D大哥,大哥请开始你的表演 官方地址:threejs.org/ 官方案例:threejs.org/examples/#c… 源码:简单,引入three,引入3d 实现:2:1的全景在PC端,可以预览,左右上下 鼠标移动 优点:说不出口 缺点:PC端不能放大缩小,图片需要裁剪六张,移动端,不能放大缩小,更加糟糕的是渲染滴很差,截图为证,手机也是如此(此方案 凉凉 不符合需求)
第二种方案:aframe
官方地址:aframe.io/ 官方案例:aframe.io/examples/sh… 源码:真是太简单了,引入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
官方地址:pannellum.org/ 官方案例:pannellum.org/documentati… 源码:引用同样是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
官方地址:krpano.com/ 中文教程:www.krpano360.com/
实现:2:1的全景在PC端,可以预览,左右上下鼠标移动,能够放大缩小,移动端也完美具备这些需求,完全符合我的需求,并且没有锯齿 跟着教程走一遍,你就知道原理了 简单原理:准备一张全景图,把全景图拖入它的工具中