JS+CSS3 360度全景圖插件 - Watch3D.js

平常閒扯

從上一篇文章到這篇中間快過了一年了，時間真滴過得快。不是在下中間沒想過寫新的文章，而是本身確實變懶了(體重+1 +1 +1 +1....) 。。OTL。。。不過到最後以爲仍是須要寫點東西，否則人就真廢了，因而便有了這樣一個插件（實際上是偶然看到別人的一個全景案例不是用webgl寫的，從而產生了興♂趣，就去練了一下手）。

代碼總的來講比較簡單，相比較webgl上手難度來說，用css3簡單太多了，主要是簡單的初高中數學幾何學知識，而後用好perspective和transform就好了，廢話就到這裏，下面開始正文。

連接

demo ： 點我，我是demo
github ： 歡迎你們來點個星

原理

總的來講，就一句話： 保證3D的視點在場景立方體的內部就好了，以下圖（從別人那裏拿的）

1. 各邊初始位置指的就是：場景容器的translateZ的值;
2. 視點距場景的距離是 let space = perspective的值 - 場景容器的translateZ值
3. 而造成3D全景效果的條件就是：space < 多邊形的邊偏移的translateZ值。

不理解的能夠看這篇文章，原理寫得比我詳細多了：地址

我這裏補充一點踩坑狀況：

1.各邊偏移距離的計算方法
首先須要肯定多邊形的邊數，最小爲4，咱們這裏設爲10，那麼每條邊與中心點的夾角爲 360/10 = 36度
其次肯定每條邊的長度， 邊長 = 圖片寬度 / 數量， 咱們這裏假設 圖片寬度 5000，有 邊長 = 5000 / 10 = 500px
最後肯定偏移距離：

let num = 10; //邊數
let angle = 360 / num; //每條邊對應夾角
let width = 5000;
let unit = width / num; 
let translateZ = ( unit / 2 ) / Math.tan( angle / 2 * Math.PI / 180 );
//這裏基本上已經計算完成，可是實際效果是每一塊區域都會顯示一條條白色的邊，很難看，具體能夠參考上面別人寫的那篇文章裏的案例。因此咱們須要作點處理
let transZ = translateZ - 5;
//往中心偏移5px，這樣就看不出來了

2.關於初始角度的問題
因爲處理多邊形每條邊的時候是 「先旋轉，後偏移」 因此「默認狀況下」咱們見到的第一張圖是並不屬於第一條邊，第一條邊正對屏幕向外。這裏咱們讓 場景元素 初始從-180度 開始就能夠了

插件使用方法

無依賴庫
詳細能夠查看 github

let w3d = new watch3D({
    wrapper : ".wrapper", //容器元素爲.wrapper
    autoplay : true, //自動播放
    width: 5000, //寬度爲5000
    height : 2500, //高度爲2500
    num : 12, //分紅12塊
    maxY : 25, //最大仰俯角爲25度
    reverse : false, //反向爲false
    tips : { //tip數據
        0 : {
            styles : {
                "height" : "100px",
                "width" : "100px",
                "background-color" : "#6cf",
                "text-align" : "center",
                "margin-right" : "10px",
                "color" : "#fff",
                "cursor" : "pointer"
            },
            content : "風景1",
            callback : function(e){
                w3d.pause();
                w3d.changeData({
                    num : 10,
                    resource : "sources/4.jpg"
                },true);
            }
        }
    },
    resource : "sources/5.jpg", //圖片資源地址
    loadstart : function(){
        //加載開始時
    },
    loading : function(data){
        //加載中
    },
    loadend : function(data){
        //加載結束後
    },
    start : function(point){
        //觸摸開始
    },
    move : function(point){
        //觸摸移動中
    },
    end : function(point){
        //觸摸結束
    }
});

結語

文章寫得比較簡單，主要是不知道要寫些什麼東西，貼代碼一段一段解釋的話感受很累，並且源碼中基本上我都加了註釋，因此偷點懶吧。

插件只提供了一些基本的功能，沒有監聽deviceorientation事件，不是沒這打算，是在編寫過程當中遇到了一個bug並且查了半天也沒找到解決辦法（當beta值處於90和-90時，alpha和gamma會跳動得很厲害，沒辦法讓體驗變得順暢，因此去除了）。若是有人碰到過相似的問題而且找到了解決辦法的話，強烈歡迎留言或者私信，畢竟本人仍是想寫個完整的插件的。

以上，文章很亂，寫也得不怎麼盡興，主要是沒辦法把教程寫清楚，若是確實疑問很大的話能夠聯繫我，我會盡力回答的，求各位大神輕噴，謝謝。