如果對three.js一無所知的同學可以先看一篇關於three.js的介紹（什麼是three.js）：

photo-sphere-viewer介紹可以直接看官網：

依賴包：

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呼叫介面：