CSS 3D Panorama（全景）之淘寶造物節(jié)技術(shù)剖析

作者：劉健超_Jc 2016-09-13 17:51:23

3D 全景并不是什么新鮮事物了，但以前我們?cè)?Web 上看到的 3D 全景一般是通過(guò) Flash 實(shí)現(xiàn)的。若我們能將 CSS3 Transform 的相關(guān)知識(shí)運(yùn)用得當(dāng)，也是能實(shí)現(xiàn)類(lèi)似的效果。換句話(huà)說(shuō)，3D 全景其實(shí)就是 CSS3 3D 的應(yīng)用場(chǎng)景之一。

[[171460]]

前言

準(zhǔn)備

在實(shí)現(xiàn) CSS3 3D 全景之前，我們先理清部分 CSS3 Transform 屬性：

transform-origin：元素變形的原點(diǎn)(默認(rèn)值為 50% 50% 0，該數(shù)值和后續(xù)提及的百分比均默認(rèn)基于元素自身的寬高算出具體數(shù)值);
perspective：指定了觀(guān)察者與 z=0 平面的距離，使具有三維位置變換的元素產(chǎn)生透視效果。(默認(rèn)值：none，值只能是絕對(duì)長(zhǎng)度，即負(fù)數(shù)是非法值);
transform-style：用于指定其為子元素提供 2D 還是 3D 的場(chǎng)景。另外，該屬性是非繼承的;
transform：該屬性能讓你修改 CSS 可視化模型的坐標(biāo)空間，其中包括平移(translate)、旋轉(zhuǎn)(rotate)、縮放(scale) 和扭曲(skew)。

下面對(duì)上述的一些點(diǎn)進(jìn)行更深入的分析：

對(duì)于 perspective，該屬性指定了“眼睛”與元素的 perspective-origin (默認(rèn)值是 50% 50%)點(diǎn)的距離。那么問(wèn)題來(lái)了：“當(dāng)我們應(yīng)用 px 作為衡量單位時(shí)，那它的實(shí)際距離該如何量化呢(即如何得到我們熟悉且易于表達(dá)的距離)?”

答：當(dāng)我們的屏幕的分辨率是 1080P(1920*1080px)，且該元素或祖先元素的 perspective 值是 1920px 時(shí)，該應(yīng)用了 CSS3 3D Transform 的元素的立體效果就相當(dāng)于我們?cè)诰嚯x一個(gè)屏幕寬度(1920px)的屏幕前觀(guān)看該元素的真實(shí)效果。盡管如此，目前我也不清楚如何準(zhǔn)確地為元素設(shè)置一個(gè)合適的 perspective 值，只能猜測(cè)個(gè)大概值，然后再動(dòng)態(tài)修改值，以達(dá)到滿(mǎn)意的呈現(xiàn)效果。

根據(jù) 相似三角形的性質(zhì)可計(jì)算出被前移的元素最終在屏幕上顯示的實(shí)際大小

另外，關(guān)于 perspective 還有另外一個(gè)重要的點(diǎn)。因?yàn)椋琾erspective-origin 的默認(rèn)值是 50% 50%，因此，對(duì)哪個(gè)元素應(yīng)用perspective 屬性，就決定了“眼睛”的位置(即我們的“眼睛”是在哪個(gè)角度看物體)。一般來(lái)說(shuō)，當(dāng)我們需要正視物體時(shí)，就會(huì)將該屬性設(shè)置在與該元素中心重合的某一祖先元素上。

再另外，如果說(shuō)：“如何讓一個(gè)元素(的背面)不可見(jiàn)?”，你可能會(huì)說(shuō) backface-visibility:hidden;。其實(shí)，對(duì)于在“眼睛”背后的元素(以元素的 transform-origin 為參考點(diǎn))，即元素的z軸坐標(biāo)值大于 perspective 的值，瀏覽器是不會(huì)將其渲染出來(lái)的。

對(duì)于 transform-style，該屬性指定了其子元素是處于 3D 場(chǎng)景還是 2D 場(chǎng)景。對(duì)于 2D 場(chǎng)景，元素的前后位置是按照平時(shí)的渲染方式(即若在普通文檔流中，是按照代碼中元素的先后順序，后面的元素會(huì)遮住在其前面的元素);對(duì)于 3D 場(chǎng)景，元素的前后位置則按照真實(shí)世界的規(guī)則排序(即越靠近“眼睛”的，會(huì)遮住離“眼睛”更遠(yuǎn)的元素)。

另外，由于 transform-style 屬性是非繼承的，對(duì)于中間節(jié)點(diǎn)需要顯式設(shè)定。

對(duì)于 transform 屬性：下圖整理了 rotate3d、translate3d 的變換方向：

transform 中的變換屬性的順序是有關(guān)系的，如 translateX(10px) rotate(30deg) 與 rotate(30deg) translateX(10px) 是不等價(jià)的。

另外，需要注意的是 scale 中如果有負(fù)數(shù)值，則該方向會(huì)產(chǎn)生 180 度的翻轉(zhuǎn);再另外，部分 transform 效果會(huì)導(dǎo)致元素(字體)模糊，如 translate 的數(shù)值存在小數(shù)、通過(guò) translateZ 或 scale 放大元素等等。每個(gè)瀏覽器都有其不同的表現(xiàn)。

實(shí)現(xiàn)

上面理清了一些 CSS Transform 的知識(shí)點(diǎn)，下面就講講如何實(shí)現(xiàn) CSS 3D 全景：

想象一下，當(dāng)我們站在十字路口中間，身體不動(dòng)，頭部旋轉(zhuǎn) 360°，這個(gè)過(guò)程中所看到的畫(huà)面就形成了一幅以你為中心的全景圖了。其實(shí)，當(dāng)焦距不變時(shí)，我們就等同于站在一個(gè)圓柱體的中心。

但是，虛擬世界與現(xiàn)實(shí)的最大不同是：沒(méi)有東西是連續(xù)的，即所有東西都是離散的。例如，你無(wú)法在屏幕上顯示一個(gè)完美的圓。你只能以一個(gè)正多邊形表示圓：邊越多，圓就越“完美”。

同理，在三維空間，每個(gè) 3D 模型都等同于一個(gè)多面體(即 3D 模型只能由不彎曲的平面組成)。當(dāng)我們討論一個(gè)本身就是多面體(如立方體)的模型時(shí)并不足以為奇，但當(dāng)我們想展示其它模型時(shí)，如球體時(shí)，就需要記住這個(gè)原理了。

淘寶造物節(jié)的活動(dòng)頁(yè) 就是 CSS 3D 全景的一個(gè)很贊的頁(yè)面，它將全景圖分隔成 20 等份，相鄰的元素間差 18°(360/20)。需要注意的是：我們要確保每個(gè)元素的正面是指向圓柱中心的，所以要計(jì)算好每等份的旋轉(zhuǎn)角度值。然后再將元素向外(即 Z 軸方向)平移 rpx。對(duì)于立方體 r 就是邊長(zhǎng)/2，而對(duì)于其它更復(fù)雜的正多面體呢?

舉例：對(duì)于正九面體，每個(gè)元素的寬為 210px，對(duì)應(yīng)的角度為 40°，即如下圖(圖片來(lái)自：https://desandro.github.io/3d...)

正九面體的俯視圖

計(jì)算過(guò)程

由此得到一個(gè)公用函數(shù)，只需傳入含有元素的寬度和元素?cái)?shù)量的對(duì)象，即可得到 r 值：

function calTranslateZ(opts) { 
  return Math.round(opts.width / (2 * Math.tan(Math.PI / opts.number))) 
} 
 
calTranlateZ({ 
    width: 210, 
    number: 9 
});  // 288

俯視時(shí)所看到的元素外移動(dòng)畫(huà)

另外，為了讓下文易于理解，我們約定 html 結(jié)構(gòu)是：

#view(perspective:1000px) 
    #stage(transform-style:preserve-3d) 
        #cube(transform-style:preserve-3d) 
            .div（width:600px;height:600px;） /*組成立方體的元素*/

正多面體構(gòu)建完成后，就需要將我們的“眼睛”放置在正多面體內(nèi)。由于在“眼睛”后的元素是不會(huì)被瀏覽器所渲染的(與 .div元素是否設(shè)置 backface-visibility:hidden; 無(wú)關(guān))，且我們保證了 .div元素的正面都指向了正多面體的中心，這就形成 360° 被環(huán)繞的效果了。

那“眼睛”具體是被放置在哪個(gè)位置呢?

答：通過(guò)設(shè)置 #stage 元素的 translateZ 的值，讓不能被看到的 .div元素的 Z 軸坐標(biāo)值大于 perspective 的值即可。如：立方體的正面的 translateZ 是 -300px(為了保證立方體的正面是指向立方體中心，正面元素需要設(shè)置 rotateY(-180deg) translateZ(-300px)，即正面元素向“眼球”方向平移了 300px)，而 #view 的 perspective 的值為 1000px，那么 #stage 的 translateZ 的值應(yīng)該大于 700px 且小于 1300px，具體數(shù)值則取決于你想要呈現(xiàn)的效果了。

根據(jù)上述知識(shí)，我粗略地模仿了“造物節(jié)”的效果：http://jdc.jd.com/lab/zaowu/i...

其實(shí)，只需 6 幅圖就可以實(shí)現(xiàn)一張常見(jiàn)的無(wú)死角全景圖。我自己又試驗(yàn)了下：http://jdc.jd.com/lab/zaowu/i...

可由下圖看出，將水平的 4 張圖片合成后就是一張全景圖：

理解上述知識(shí)后，就可以通過(guò)為元素設(shè)置合適的 CSS3 Transform 屬性值，即可實(shí)現(xiàn)一張可交互的全景圖了。當(dāng)然，交互的效果可以是拖拽，也可以是重力感應(yīng)等。

正如在上文提到的：“沒(méi)有東西是連續(xù)的，即所有東西都是離散的...”。將《造物節(jié)》與后續(xù)全景圖的水平方向上的圖片分別合成一張圖后，可以發(fā)現(xiàn)：圖片數(shù)量越多，圖片的要求也越低。你覺(jué)得呢?

造物節(jié)全景圖

全景圖素材的制作

將全景圖制作分為設(shè)計(jì)類(lèi)與實(shí)景類(lèi)：

設(shè)計(jì)類(lèi)

要制作類(lèi)似《淘寶造物節(jié)》的全景頁(yè)面，設(shè)計(jì)稿需要有以下這些要求。

注：下面提及的具體數(shù)據(jù)均基于《造物節(jié)》，可根據(jù)自身要求進(jìn)行調(diào)整(若發(fā)現(xiàn)欠缺，歡迎作出補(bǔ)充)。

整體背景設(shè)計(jì)圖如下(2580*1170px，被分成 20 等份)：

基本要求：

水平方向上需要首尾相連;
因?yàn)樾Ч麍D最終需要切成 N 等份，所以盡可能讓設(shè)計(jì)圖的寬度能被 N 整除;
圖片尺寸不僅要考慮正視圖的大小，還要考慮元素在旋轉(zhuǎn)時(shí)依然能覆蓋視野(可選)。

當(dāng)然，上圖只是背景圖，還可以添加一些小物體素材(通過(guò)運(yùn)動(dòng)速度的差異形成視差，增強(qiáng)立體效果)，如：

小物體元素(虛線(xiàn)是用于參考的，造物節(jié)中共有 21 個(gè)小物體)

如上圖所示，每個(gè)圖片也是被等分成 M 等份。當(dāng)然，M 取決于物體在背景上的具體位置和本身大小。另外，M 的寬度是與 N 的寬度相等的。盡管部分物體(M>1)的兩側(cè)等份的圖案占比小，但建議保留同樣的寬度。

注：如果小物體有特殊的變形效果，應(yīng)該備注具體變形參數(shù)。

對(duì)于頂部和底圖圖片，則無(wú)特殊要求。

實(shí)景類(lèi)

如果想制作實(shí)景的全景，可以看看 Google 街景。

Google 街景推薦的設(shè)備如下：

如上圖，最實(shí)惠的就是最后一個(gè)選項(xiàng)—— Google 街景 APP，該應(yīng)用內(nèi)部提供了全景相機(jī)功能，但正如圖片介紹所說(shuō)，這是需要練習(xí)的，因此對(duì)操作要求比較高。

補(bǔ)充：上周六(2016.8.20)參加了 TGDC 的分享會(huì)，嘉賓分享了他們處理全景的方式：

利用 RICOH THETA S 等專(zhuān)業(yè)設(shè)備拍出全景圖
導(dǎo)出靜態(tài)圖像
利用設(shè)備專(zhuān)門(mén)提供的 APP 或 krpamo tools、pano2vr、Glsky box 等工具將靜態(tài)圖像轉(zhuǎn)為6張圖
利用 Web 技術(shù)制作可交互的全景圖

其中 Web 技術(shù)有以下3種可選方式(當(dāng)然，還有其它)：