成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

lpjustdoit / 1091人閱讀

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

日常閑扯

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

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

鏈接

demo ： 點(diǎn)我，我是demo
github ： 歡迎大家來點(diǎn)個(gè)星

原理

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

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

視點(diǎn)距場景的距離是 let space = perspective的值 - 場景容器的translateZ值

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

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

我這里補(bǔ)充一點(diǎn)踩坑情況：

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

let num = 10; //邊數(shù)
let angle = 360 / num; //每條邊對應(yīng)夾角
let width = 5000;
let unit = width / num; 
let translateZ = ( unit / 2 ) / Math.tan( angle / 2 * Math.PI / 180 );
//這里基本上已經(jīng)計(jì)算完成，但是實(shí)際效果是每一塊區(qū)域都會(huì)顯示一條條白色的邊，很難看，具體可以參考上面別人寫的那篇文章里的案例。所以我們需要做點(diǎn)處理
let transZ = translateZ - 5;
//往中心偏移5px，這樣就看不出來了

2.關(guān)于初始角度的問題
由于處理多邊形每條邊的時(shí)候是 “先旋轉(zhuǎn)，后偏移” 所以“默認(rèn)情況下”我們見到的第一張圖是并不屬于第一條邊，第一條邊正對屏幕向外。這里我們讓 場景元素 初始從-180度 開始就可以了

插件使用方法

無依賴庫
詳細(xì)可以查看 github

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

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107853.html

相關(guān)文章

  • 3D全景漫游

    摘要：可選，默認(rèn)值為，設(shè)置為則禁止用戶和全景圖交互導(dǎo)航條不可用?？蛇x，默認(rèn)值為，全景圖在毫秒后會(huì)自動(dòng)進(jìn)行動(dòng)畫。當(dāng)全景圖準(zhǔn)備就緒并且第一張圖片顯示時(shí)的回調(diào)函數(shù)。 3D全景漫游 showImg(http://mmbiz.qpic.cn/mmbiz/cibketMByvrbpDqUQ9LiaBvutnwMehicnO2RZurdl96FLtwqlf6LjWS0Bv8ApQY0YjHdtyFWuzz...

    DesGemini 評(píng)論0 收藏0

  • 看完這篇，你也可以實(shí)現(xiàn)一個(gè)360度全景插件

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

    Michael_Lin 評(píng)論0 收藏0

  • 看完這篇，你也可以實(shí)現(xiàn)一個(gè)360度全景插件

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

    XiNGRZ 評(píng)論0 收藏0

  • 看完這篇，你也可以實(shí)現(xiàn)一個(gè)360度全景插件

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

    fredshare 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<