前言最近做了一个720全景工具。很多开发者都觉得全景图很简单，github上也有很多全景图的源码，但是实际使用的时候就会发现有很多坑，还没有达到真正意义上的商业化水平。下面整理一下我们开发这个项目遇到的一些坑和解决方法，已经发布在网上https://720.h5ds.com/工具介绍：H5-720Panorama（简称H5-720）是一个基于threejs+h5的全景制作工具。用户可以上传全景图片制作全景图。H5-720可预设按键、添加元素、添加热点、添加特效、添加多种交互方式，一键重力感应、VR眼镜支持，PC端制作后可适配多端观看。什么是全景图？在此之前，先简单介绍一下全景，可以在360度无死角观看。百度百科的专业解释是这样的：全景图采用广角表现方式和绘画、照片、视频以及3D模型等多种形式，尽可能多地展示周围环境。360全景图，即用专业相机捕捉整个场景的图像信息或用建模软件渲染图像，用软件拼接图像，用专用播放器播放，即，将平面照片或电脑建模图像转成360独全观，用于虚拟现实浏览，将二维平面图模拟成真实的三维空间，呈现给观者。Panorama小行星视角：PanoramaVR视角：当我们想要查看全景图时，需要借助专门的软件。有的叫720全景，有的叫360全景。它们其实是一样的，因为有些人把左右360和上下360度数相加，也就是说可以从上往下看，从左看，从右看，从左看。全景web端解决方案web端需要展示全景图。这里我们使用threejs来实现。目前有三种常见的解决方案。1.将全景图映射到球面上是最简单的方法，类似于地球仪。但是，这种方法有一个很大的缺陷。如果纹理过大，手机浏览器会直接崩溃，无法支持高清图片。PC端性能也会很差，图片太大时对GPU性能要求会很高。2.把图片切成6块，映射成一个立方体。针对第一种情况的优化版也是官方的全景图解，是六面体全景图。将全景图切成6块并将其映射到立方体上。.我们可以使用工具将全景图切成6块：https://jaxry.github.io/panor...然后映射到立方体的6个面上。这个也有一些缺陷：不支持超高清图片，因为超高清图片如果切成6块会很大。另外，如果是立方体贴图，将无法制作小行星视图。于是第三种终极方案出现了。3.将全景图切成N块，然后在球体上对它们进行纹理化。在我们的项目中，我们将图片切割成16份，然后使用threejs自定义shader将贴图粘贴到球体上，每个瓦片地图都会独立加载和更新，这样就可以做到按需加载。要实现从模糊到清晰的加载效果，需要做2层球，红球包裹蓝球，蓝球使用瓦片贴图，红贴图使用低清晰度全景图，这样就可以了一开始可以模糊。成功加载每个瓦片图像后，它逐渐变得清晰。当然，如果你想要更高清的效果，可以监控变焦倍率，变焦变大后在视角中更换更高清的平铺图。我们使用第三种方法来解决全景图的性能问题和预加载问题
