如果对three.js一无所知的同学可以先看一篇关于three.js的介绍（什么是three.js）：
https://blog.csdn.net/doupi520/article/details/53907179
photo-sphere-viewer介绍可以直接看官网：
https://photo-sphere-viewer.js.org/
依赖包：
doT.js JS模板语言，类似于jade
uEvent（事件发射器库，设计模式这本书中讲过观察者模式）
观察者模式的介绍：
观察者模式又叫发布订阅模式（Publish/Subscribe），
它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，
这个主题对象的状态发生变化时就会通知所有的观察者对象，
使得它们能够自动更新自己。
使用观察者模式的好处：
支持简单的广播通信，自动通知所有已经订阅过的对象。
页面载入后目标对象很容易与观察者存在一种动态关联，增加了灵活性。
目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。D.js Promises/A+规范
挽起袖子撸起来：
1.
啥！？马上就报错了？
找了一下原因，是因为 Photo-Sphere-Viewer-master 文件夹下也有three.min.js这个文件，就是文件拿错了。
解决办法：
three.min.js 在 three.js-dev > build 下面
js/photo-sphere-viewer.min.js 在 photo-sphere-viewer 直接文件夹下面
2.报错没有了，但是新的问题又来了，页面内部还是一片空白，看看API文档
2.1原来是少了size，把size添加进去以后就出现了黑色的宽580，高300的黑色框框，因为效果图没有意义，就不放了，但是黑色的框框还是没有图片
<script>
var viewer = new PhotoSphereViewer({
container: 'viewer',
panorama: 'images/index/72.jpg',
size:{
width:580,
height:300
}
});
</script>2.2原来是PSV只接受2:1比例的图片，接着来
2.3从官网上下载了一张6000*3000的图片，又报错了：
THREE.WebGLRenderer: image is not power of two (6000x3000). Resized to 4096x2048
这段话的意思是让我把6000*3000的图片改成4096*2048大小的，我一直以为是图片被自动重置为4096*2048，后来幻神帮我上了一堂英语课，Σ( ° △ °|||)︴
2.4改完了，还是黑屏一块，但是报错没有了，真是个悲惨的消息！
好了，到了这里解决问题的手段就非常尴尬了，只能场外求助了远在东海边缘的师尊，直接上代码吧。
老师指出的第一点，就是文件顺序排列方式不能乱来，PSV的css移到head里面是没有问题的，但是脚本里面
1：three.js
2：D.min.js
3：doT.min.js
4：uevent.min.js
5：photo-sphere-viewer.min.js
6：JQ脚本
其实这里多说一句，three.js官网的脚本和PSV官网的脚本，我下载下来一起用发现会报错，我不知道是不是版本的原因，如果遇到相同问题的同学可以加我QQ455988586，我把手里的脚本给你
最后就是调用一下：
如果不想让图片自动旋转可以去掉后面的viewer.on...这段代码，具体API还是看官方文档。
另外附上一组网上的中文API调用接口：
