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

lpjustdoit 發(fā)布于2019-08-26 11:56 / 1077人閱讀

摘要：日常閑扯從上一篇文章到這篇中間快過了一年了，時間真滴過得快。不是在下中間沒想過寫新的文章，而是自己確實變懶了體重。。。。。如果有人碰到過類似的問題并且找到了解決辦法的話，強烈歡迎留言或者私信，畢竟本人還是想寫個完整的插件的。

日常閑扯

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

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

鏈接

demo ：點我，我是demo
github ：歡迎大家來點個星

原理

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

各邊初始位置指的就是：場景容器的translateZ的值;

視點距場景的距離是 let space = perspective的值 - 場景容器的translateZ值

而形成3D全景效果的條件就是：space < 多邊形的邊偏移的translateZ值。

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

我這里補充一點踩坑情況：

1.各邊偏移距離的計算方法
首先需要確定多邊形的邊數(shù)，最小為4，我們這里設為10，那么每條邊與中心點的夾角為 360/10 = 36度
其次確定每條邊的長度，邊長 = 圖片寬度 / 數(shù)量，我們這里假設圖片寬度 5000，有邊長 = 5000 / 10 = 500px
最后確定偏移距離：

let num = 10; //邊數(shù)
let angle = 360 / num; //每條邊對應夾角
let width = 5000;
let unit = width / num; 
let translateZ = ( unit / 2 ) / Math.tan( angle / 2 * Math.PI / 180 );
//這里基本上已經計算完成，但是實際效果是每一塊區(qū)域都會顯示一條條白色的邊，很難看，具體可以參考上面別人寫的那篇文章里的案例。所以我們需要做點處理
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數(shù)據(jù)
        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){
        //觸摸結束
    }
});

結語

文章寫得比較簡單，主要是不知道要寫些什么東西，貼代碼一段一段解釋的話感覺很累，而且源碼中基本上我都加了注釋，所以偷點懶吧。

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

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

GPU云服務器云服務器 js 資源甘特圖插件全景圖 js放大鏡插件三個圖大數(shù)據(jù) 全景圖

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107853.html

3D全景漫游

摘要：可選，默認值為，設置為則禁止用戶和全景圖交互導航條不可用。可選，默認值為，全景圖在毫秒后會自動進行動畫。當全景圖準備就緒并且第一張圖片顯示時的回調函數(shù)。 3D全景漫游 showImg(http://mmbiz.qpic.cn/mmbiz/cibketMByvrbpDqUQ9LiaBvutnwMehicnO2RZurdl96FLtwqlf6LjWS0Bv8ApQY0YjHdtyFWuzz...

DesGemini 2019-08-19 18:26 評論0 收藏0
看完這篇，你也可以實現(xiàn)一個360度全景插件

摘要：兩種相機的區(qū)別目前提供了幾種不同的相機，最常用的，也是下面插件中使用的兩種相機是透視相機正交投影相機。上面的圖很清楚的解釋了兩種相機的區(qū)別右側是正交投影相機他不具有透視效果，即物體的大小不受遠近距離的影響，對應的是投影中的正交投影。導讀本文從繪圖基礎開始講起，詳細介紹了如何使用Three.js開發(fā)一個功能齊全的全景插件。我們先來看一下插件的效果： showImg(https://user...

Michael_Lin 2019-05-23 16:25 評論0 收藏0
看完這篇，你也可以實現(xiàn)一個360度全景插件

摘要：導讀本文從繪圖基礎開始講起，詳細介紹了如何使用開發(fā)一個功能齊全的全景插件。兩種相機的區(qū)別目前提供了幾種不同的相機，最常用的，也是下面插件中使用的兩種相機是透視相機正交投影相機。導讀本文從繪圖基礎開始講起，詳細介紹了如何使用Three.js開發(fā)一個功能齊全的全景插件。我們先來看一下插件的效果： showImg(https://segmentfault.com/img/remote/...

XiNGRZ 2019-08-23 17:16 評論0 收藏0
看完這篇，你也可以實現(xiàn)一個360度全景插件

摘要：導讀本文從繪圖基礎開始講起，詳細介紹了如何使用開發(fā)一個功能齊全的全景插件。兩種相機的區(qū)別目前提供了幾種不同的相機，最常用的，也是下面插件中使用的兩種相機是透視相機正交投影相機。導讀本文從繪圖基礎開始講起，詳細介紹了如何使用Three.js開發(fā)一個功能齊全的全景插件。我們先來看一下插件的效果： showImg(https://segmentfault.com/img/remote/...

fredshare 2019-08-02 16:15 評論0 收藏0