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會跳動得很厲害，沒辦法讓體驗變得順暢，所以去除了）。如果有人碰到過類似的問題並且找到了解決辦法的話，強烈歡迎留言或者私信，畢竟本人還是想寫個完整的插件的。

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