css3d-engine源碼學習簡析

pinecone 發布于2019-08-21 17:47 / 2475人閱讀

摘要：全景旋轉首先學習一下基礎坐標系這個只要記住一下軸各自方向就可以，下面分析會用到。

開始

從這里開始準備攻略webgl（準備挖新坑），Flutter框架當然也會繼續補充，但是今天學習的不是webgl，而是css3d-engine這個庫，因為之前搞活動看到了一個全景旋轉活動就是使用這個庫完成，頗為驚艷（一開始以為是webgl實現的，但是看了代碼才知道用CSS3就可以完成，雖然覺得還是應該用webgl做比較合適），抱著好奇心于是學習一下，嗯，這個庫設計相當精簡，整個庫的代碼才800多行，所以代碼看下來沒啥壓力，今天順著一個例子來分析一下。

全景旋轉

首先學習一下基礎坐標系：

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

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

一個不停旋轉的全景圖，當然我們把鏡頭拉開一點，發現其實它是一個圓柱體不停在旋轉：

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

再接著分析構建整個場景的代碼：

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

這里會初始化整個舞臺，也會創建默認的攝像機：

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初始化的時候，設置默認的perspective是設為800px，而且會創建兩個Sprite輔助構建場景（這兩個Sprite作用相當的大，場景旋轉，拉進拉遠都是靠這兩個Sprite），最后設置攝像機；當調起update方法然后會順著調起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默認就是75（因為人的有效視角就是75度），接著整個計算其實就是一個已知角度和對邊求鄰邊的公式：

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

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

然后設置__pfix的位置，Z軸方向上，取了攝像機相反的方向，因為我們一般理解攝像機拉遠拉近都是攝像機在移動，但是整個場景往相反方向移動其實也可以達到相同效果，所以這里就是整個場景移動來到做到的：

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

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

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

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

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

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

總結

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

云服務器 GPU云服務器簡析跳表簡析統計年度數據簡析年度統計數據簡析

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

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

css3d-engine源碼學習簡析

摘要：全景旋轉首先學習一下基礎坐標系這個只要記住一下軸各自方向就可以，下面分析會用到。開始從這里開始準備攻略webgl（準備挖新坑），Flutter框架當然也會繼續補充，但是今天學習的不是webgl，而是css3d-engine這個庫，因為之前搞活動看到了一個全景旋轉活動就是使用這個庫完成，頗為驚艷（一開始以為是webgl實現的，但是看了代碼才知道用CSS3就可以完成，雖然覺得還是應該用...

Amio 2019-08-01 18:04 評論0 收藏0
css3d-engine源碼學習簡析

摘要：全景旋轉首先學習一下基礎坐標系這個只要記住一下軸各自方向就可以，下面分析會用到。開始從這里開始準備攻略webgl（準備挖新坑），Flutter框架當然也會繼續補充，但是今天學習的不是webgl，而是css3d-engine這個庫，因為之前搞活動看到了一個全景旋轉活動就是使用這個庫完成，頗為驚艷（一開始以為是webgl實現的，但是看了代碼才知道用CSS3就可以完成，雖然覺得還是應該用...

魏憲會 2019-08-29 13:54 評論0 收藏0
Loader學習，簡析babel-loader

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

wpw 2019-08-26 13:35 評論0 收藏0
Vue源碼解析(5)-virtual-dom 實現簡析

傳送門vdom原理

darcrand 2019-08-23 11:45 評論0 收藏0