css3d engine原始碼學習簡析

從這裡開始準備攻略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().update();

這裡會初始化整個舞台，也會建立預設的攝像機：

initialize: function (params)

stage初始化的時候，設定預設的perspective是設為800px，而且會建立兩個sprite輔助構建場景（這兩個sprite作用相當的大，場景旋轉，拉進拉遠都是靠這兩個sprite），最後設定攝像機；當調起update方法然後會順著調起stage的updatet方法：

updatet: function () ,

這裡可以算是整個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度的場景。

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相關的知識，可以考慮怎樣融入日常的活動或者頁面裡面，增加吸引力。

css3d engine原始碼學習簡析

Redux createStore原始碼學習

pytorch geometric 原始碼學習

logback原始碼閱讀根據原始碼學擴充套件點七

css3d engine原始碼學習簡析

Redux createStore原始碼學習

pytorch geometric 原始碼學習

logback原始碼閱讀 根據原始碼學擴充套件點 七

相關推薦

logback原始碼閱讀根據原始碼學擴充套件點七