国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css3d-engine源碼學(xué)習(xí)簡析

魏憲會 / 1721人閱讀

摘要：全景旋轉(zhuǎn)首先學(xué)習(xí)一下基礎(chǔ)坐標(biāo)系這個只要記住一下軸各自方向就可以，下面分析會用到。

開始

從這里開始準(zhǔn)備攻略webgl（準(zhǔn)備挖新坑），F(xiàn)lutter框架當(dāng)然也會繼續(xù)補(bǔ)充，但是今天學(xué)習(xí)的不是webgl，而是css3d-engine這個庫，因?yàn)橹案慊顒涌吹搅艘粋€全景旋轉(zhuǎn)活動就是使用這個庫完成，頗為驚艷（一開始以為是webgl實(shí)現(xiàn)的，但是看了代碼才知道用CSS3就可以完成，雖然覺得還是應(yīng)該用webgl做比較合適），抱著好奇心于是學(xué)習(xí)一下，嗯，這個庫設(shè)計相當(dāng)精簡，整個庫的代碼才800多行，所以代碼看下來沒啥壓力，今天順著一個例子來分析一下。

全景旋轉(zhuǎn)

首先學(xué)習(xí)一下基礎(chǔ)坐標(biāo)系：

這個只要記住一下x,y,z軸各自方向就可以，下面分析會用到。

接下來就是今天分析的例子，也是來自css3d-engine的例子：

一個不停旋轉(zhuǎn)的全景圖，當(dāng)然我們把鏡頭拉開一點(diǎn)，發(fā)現(xiàn)其實(shí)它是一個圓柱體不停在旋轉(zhuǎn)：

只是我們的鏡頭剛好在圓柱體的里面，所以就看到全景圖不停在旋轉(zhuǎn)了。

再接著分析構(gòu)建整個場景的代碼：

 var s = new C3D.Stage();
 s.size(window.innerWidth, window.innerHeight).material({
    color: "#cccccc"
 }).update();

這里會初始化整個舞臺，也會創(chuàng)建默認(rèn)的攝像機(jī)：

initialize: function (params) {
    ...
    this.el.style[prefix + "Perspective"] = "800px";
    this.el.style[prefix + "TransformStyle"] = "flat";
    this.el.style[prefix + "Transform"] = "";
    this.el.style.overflow = "hidden";
    
    this.__rfix = new C3D.Sprite();
    this.el.appendChild(this.__rfix.el);
    
    this.__pfix = new C3D.Sprite();
    this.__rfix.el.appendChild(this.__pfix.el);
    
    this.setCamera(new C3D.Camera());
}

Stage初始化的時候，設(shè)置默認(rèn)的perspective是設(shè)為800px，而且會創(chuàng)建兩個Sprite輔助構(gòu)建場景（這兩個Sprite作用相當(dāng)?shù)拇螅瑘鼍靶D(zhuǎn)，拉進(jìn)拉遠(yuǎn)都是靠這兩個Sprite），最后設(shè)置攝像機(jī)；當(dāng)調(diào)起update方法然后會順著調(diào)起Stage的updateT方法：

updateT: function () {
            this.fov = fixed0(0.5 / Math.tan((this.camera.fov * 0.5) / 180 * Math.PI) * this.height);
            this.el.style[prefix + "Perspective"] = this.fov + "px";
            this.__rfix.position(fixed0(this.width / 2), fixed0(this.height / 2), this.fov).rotation(-this.camera.rotationX, -this.camera.rotationY, -this.camera.rotationZ).updateT();
            this.__pfix.position(-this.camera.x, -this.camera.y, -this.camera.z).updateT();
            return this;
        },

這里可以算是整個Stage計算的核心了，首先是Stage的fov計算，它依賴了Camera的fov，而Camera的fov默認(rèn)就是75（因?yàn)槿说挠行б暯蔷褪?5度），接著整個計算其實(shí)就是一個已知角度和對邊求鄰邊的公式：

這里計算方式其實(shí)出自Three.js，github上的討論。
回到Stage剛才初始化的時候，一開始一口氣創(chuàng)建三個嵌套的div:

我們在stage設(shè)置好perspective屬性，在我的電腦（全屏）上計算出來的是619px，根據(jù)剛才的公式，是跟大家的瀏覽器高度有關(guān)，然后設(shè)置__rfix元素位置：屏幕居中，重點(diǎn)是Z軸位置的設(shè)置，可以看到設(shè)置的剛計算出來perspective等于translateZ(619px)，所以現(xiàn)在的位置（記住一開始的坐標(biāo)系，往屏幕外的為正，也就靠近視點(diǎn)）：

然后設(shè)置__pfix的位置，Z軸方向上，取了攝像機(jī)相反的方向，因?yàn)槲覀円话憷斫鈹z像機(jī)拉遠(yuǎn)拉近都是攝像機(jī)在移動，但是整個場景往相反方向移動其實(shí)也可以達(dá)到相同效果，所以這里就是整個場景移動來到做到的：

現(xiàn)在再看，在剛才代碼可以看到當(dāng)camera的x,y,z更新的時候，其實(shí)通過位移__pfix來做到的；而camera的rotateX,rotageY,rotateZ更新的時候，則是通過旋轉(zhuǎn)__rfix來做到的。為什么這樣的設(shè)置，我們剛才看到__rfix把tranlateZ設(shè)置到視點(diǎn)上，其實(shí)目的是為了讓后面的元素可以以視點(diǎn)為原點(diǎn)進(jìn)行布局，這樣我們布局時可以通過控制跟視點(diǎn)的距離進(jìn)而控制用戶視野；而旋轉(zhuǎn)的時候也可以以視點(diǎn)為原點(diǎn)進(jìn)行旋轉(zhuǎn)，x，y，z移動也是以視點(diǎn)為原點(diǎn)進(jìn)行，可以想象當(dāng)鏡頭拉遠(yuǎn)200px，再沿x軸旋轉(zhuǎn)45度的場景。

基本舞臺的構(gòu)建已經(jīng)明白了，繼續(xù)全景旋轉(zhuǎn)是怎樣做出來的：
首先整個場景是由20張129*1170的圖片組成一個圓柱體，那么這個圓柱體的半徑是多少尼？通過以下計算：

0.5* 129 / Math.tan(360 / 20 / 2 / 180 * Math.PI)

得出407px，所以代碼上把整個場景放到-400px也是應(yīng)該根據(jù)這個半徑得出來的：

  var pano = this.createPano(bgData, panoRect);
  pano.position(0, 0, -400).updateT();

所以現(xiàn)在整個場景是這樣的(可能橢圓更合適一點(diǎn)):

總結(jié)

這個庫還是很不錯的庫，也學(xué)習(xí)到一些3D相關(guān)的知識，可以考慮怎樣融入日常的活動或者頁面里面，增加吸引力。

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/112782.html

相關(guān)文章

  • css3d-engine源碼學(xué)習(xí)簡析

    摘要：全景旋轉(zhuǎn)首先學(xué)習(xí)一下基礎(chǔ)坐標(biāo)系這個只要記住一下軸各自方向就可以，下面分析會用到。 開始 從這里開始準(zhǔn)備攻略webgl（準(zhǔn)備挖新坑），F(xiàn)lutter框架當(dāng)然也會繼續(xù)補(bǔ)充，但是今天學(xué)習(xí)的不是webgl，而是css3d-engine這個庫，因?yàn)橹案慊顒涌吹搅艘粋€全景旋轉(zhuǎn)活動就是使用這個庫完成，頗為驚艷（一開始以為是webgl實(shí)現(xiàn)的，但是看了代碼才知道用CSS3就可以完成，雖然覺得還是應(yīng)該用...

    pinecone 評論0 收藏0

  • css3d-engine源碼學(xué)習(xí)簡析

    摘要：全景旋轉(zhuǎn)首先學(xué)習(xí)一下基礎(chǔ)坐標(biāo)系這個只要記住一下軸各自方向就可以，下面分析會用到。 開始 從這里開始準(zhǔn)備攻略webgl（準(zhǔn)備挖新坑），F(xiàn)lutter框架當(dāng)然也會繼續(xù)補(bǔ)充，但是今天學(xué)習(xí)的不是webgl，而是css3d-engine這個庫，因?yàn)橹案慊顒涌吹搅艘粋€全景旋轉(zhuǎn)活動就是使用這個庫完成，頗為驚艷（一開始以為是webgl實(shí)現(xiàn)的，但是看了代碼才知道用CSS3就可以完成，雖然覺得還是應(yīng)該用...

    Amio 評論0 收藏0

  • Loader學(xué)習(xí)，簡析babel-loader

    摘要：用來轉(zhuǎn)換內(nèi)容，內(nèi)部調(diào)用了方法進(jìn)行轉(zhuǎn)換，這里簡單介紹一下的原理將代碼解析成，對進(jìn)行轉(zhuǎn)譯，得到新的，新的通過轉(zhuǎn)換成，核心方法在中的方法，有興趣可以去了解一下。將函數(shù)傳入?yún)?shù)和歸并，得到。通常我們是用不上的，估計在某些中可能會使用到。 什么是Loader? 繼上兩篇文章webpack工作原理介紹（上篇、下篇）,我們了解到Loader：模塊轉(zhuǎn)換器，也就是將模塊的內(nèi)容按照需求裝換成新內(nèi)容，而且每...

    wpw 評論0 收藏0

  • Vue源碼解析(5)-virtual-dom 實(shí)現(xiàn)簡析

    傳送門vdom原理

    darcrand 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<