有一篇文章我说了H5实现全景图预览，全景视频播放的原理，有需要的小伙伴可以自行去看一下
今天我就拿出我的实践干货出来，本人实测实测过
需求
老板：我需要可以上传全景图片，然后手机网站上都可以360度看全景图
需求分析
一个上传功能
一个全景360度预览功能
正文
H5 上传功能就不说了，或下一篇文章说。
H5 有几种方式实现呢？
第一种方案：three.js(大哥出山吧)
作为前端界全景、3D大哥，大哥请开始你的表演
官方地址：https://threejs.org/
官方案例：https://threejs.org/examples/#css3d_panorama
源码：简单，引入three，引入3d
实现：2:1的全景在PC端，可以预览，左右上下 鼠标移动
优点：aaaaa,我说不出口
缺点：PC端不能放大缩小，图片需要裁剪六张，移动端，不能放大缩小，更加糟糕的是渲染滴很差，截图为证，手机也是如此（此方案 凉凉 不符合需求）
大哥，就这样跪了吗？我没有深入的研究three，可能他的强大我没有用上吧
刚开始我用的是，node+three 竟然没有 CSS3DRenderer 安装包 ，只有2D的 并且引用three 也是报各种错误
放一个我引入成功的示范：import * as THREE from "three";
官方实例的静态页面，跟官方一个效果，但是不是我想要的；我不想切六张图，还有渲染也不好，图中出现黑色这是我们老板打死也不能接受的。是我没有深入了解
本例子，不接受反驳，有能力的自己去研究。反正我是没有这个本事
总之，这个我能力不够，搞不定
放一下源码：
貌似有点多啊~ 你们还是去官网找吧，找不到私信一下
第二种方案：aframe
官方地址：https://aframe.io/
官方案例：https://aframe.io/examples/showcase/sky/
源码：真是太简单了，引入aframe 框架, <a-sky></a-sky>
实现：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>