全景图介绍

乐呵呵L

已于 2023-10-11 16:23:22 修改

阅读量360

点赞数

分类专栏：地理信息基础前端 - 知识点前端 - vue 专栏文章标签：前端

于 2023-10-11 16:22:21 首次发布

本文链接：https://blog.csdn.net/weixin_46243213/article/details/133772985

版权

前端 - 知识点同时被 3 个专栏收录

11 篇文章

订阅专栏

前端 - vue 专栏

10 篇文章

订阅专栏

地理信息基础

5 篇文章

订阅专栏

个人理解：全景图感觉是使用三脚架上的360无死角拍摄相机，或者使用无人机拍摄出来的360无死角图片。

就像下面几张图：
在这里插入图片描述

就像你站在一个地方，前后、左右、包括上下，全方位都呈现在图片里面。

实现全景图有很多种方法：pannellum, aframe, Krpano, Three, Jquery-vrview, Photo Sphere Viewer

一、Three.js

作为前端界全景、3D大哥，大哥请开始你的表演
官方地址：https://threejs.org/
官方案例：https://threejs.org/examples/#css3d_panorama
源码：简单，引入three，引入3d
实现：2:1的全景在PC端，可以预览，左右上下鼠标移动
优点：自己感受吧
缺点：PC端不能放大缩小，图片需要裁剪六张，移动端，不能放大缩小，更加糟糕的是渲染滴很差，手机也是如此
but，，，也许是能力不够

二、aframe

官方地址：https://aframe.io/
官方案例：https://aframe.io/examples/showcase/sky/
源码：真是太简单了，引入aframe 框架,
实现：2:1的全景在PC端，可以预览，左右上下鼠标移动，还支持VR模式，
优点：简单方便，一顿操作猛于虎
缺点：PC端不能放大缩小，移动端只能左右移动，不能放大缩小，不能上下滑动

三、pannellum

官方地址：https://pannellum.org/
官方案例：https://pannellum.org/documentation/overview/
源码：引用同样是so easy！
实现：2:1的全景在PC端，可以预览，左右上下鼠标移动，能够放大缩小，移动端也完美具备这些需求，完全符合我的需求，跪谢
优点：简单方便，一顿操作猛于虎
缺点：由于webGL的限制，图片宽度最大限制是4086，图片由于灯光有点失真，更加悲剧的是放大的时候，有锯齿（图片裁剪算法问题）

<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端，可以预览，左右上下鼠标移动，能够放大缩小，移动端也完美具备这些需求，并且没有锯齿

五、Photo Sphere Viewer

官方地址：Photo Sphere Viewer (photo-sphere-viewer.js.org)
中文教程：额，，，好像没有，额，，也可能我没找到，这是一个博主写的
(6条消息) photo-sphere-viewer中文文档_陈坚泓的博客-CSDN博客_photo-sphere-viewer
实现：全景在PC端，可以预览，左右上下鼠标移动，能够放大缩小，移动端也完美具备这些需求，完全符合我的需求。

借鉴文章：全景图多种方式实现
自己写的文章：Vue3 + Photo-sphere-viewer 全景