3D 全景圖 · 前端筆記

[TOC] # 準備在實現 CSS3 3D 全景之前，我們先理清部分 CSS3 Transform 相關的屬性： * [transform-origin](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin)：元素變形的原點（默認值為 50% 50% 0，該數值和后續提及的百分比默認均基于元素自身的寬高算出具體數值）； * [perspective](https://developer.mozilla.org/en-US/docs/Web/CSS/perspective): 指定了觀察者與`z=0`平面的距離，使具有三維變換的元素產生透視效果。（默認值：none，值只能是絕對長度，即負數是非法值）； * [transform-style](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style)：為子元素提供 2D 還是 3D 的場景。另外，該屬性是非繼承的； * [transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform)：修改 CSS 可視化模型的坐標空間，包括[平移（translate）](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate3d)、[旋轉（rotate）](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate)、[縮放（scale）](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale)和[扭曲（skew）](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew)。 <br> 下面我們對上述的一些點進行更深入的分析： * 對于`perspective`，該屬性指定了“眼睛”與元素的`perspective-origin`（默認值是`50% 50% 0`）點的距離。那么問題來了：“當我們以`px`作為衡量單位時，它的實際距離該如何量化呢？” 答：當屏幕分辨率是 1080P（1920\*1080px）且該元素或其祖先元素的 `perspective`數值的值為`1920px`時，應用了 CSS3 3D Transform 的子元素的立體效果就相當于我們在距離一個屏幕寬度（1920px）的屏幕前觀看該元素時的真實效果。盡管如此，目前筆者也不知道如何準確地為元素設置一個合適的`perspective`值，只能猜測大概值后進行調整，以達到滿意的呈現效果。 ![](https://box.kancloud.cn/aa51fceab3729a7b872c5cef331e26ad_680x465.png) 根據相似三角形的性質可計算出被前移的元素最終在屏幕上顯示的實際大小 ~~~ <style> .container { perspective: 1000px; } .box { width: 600px; height: 600px; margin: 0 auto; background: red; transform: translateZ(300px); } </style> <body> <div class="container"> <div class="box"></div> </div> </body> ~~~ ![](https://box.kancloud.cn/768ee0f34850f19806853704fe64fe6d_1762x859.png) 另外，關于`perspective`還有另外一個重要的點是：因為`perspective-origin`屬性的默認值是`50% 50% 0`，所以對哪個元素應用`perspective`屬性，就決定了“眼睛”的位置（即我們的“眼睛”是在哪個角度看物體）。一般來說，當我們需要正視物體時，就會將該屬性設置在與該元素中心重合的**某一祖先元素**上。再另外，如果說：“如何讓一個元素（的背面）不可見？”，你可能會回答`backface-visibility:hidden;`。其實，對于在“眼睛”背后的元素（以元素的`transform-origin`為參考點），即**元素的`Z`軸坐標值大于`perspective`的值時，瀏覽器是不會將其渲染出來的**。 * 對于`transform-style`，該屬性指定了其**子元素**是處于 3D 場景還是 2D 場景。對于 2D 場景，元素的前后位置是按照平時的渲染方式（即若在普通文檔流中，同層級元素是按照代碼中元素的先后編寫順序，后面的元素會遮住在其前面的元素）；對于 3D 場景，元素的前后位置則按照真實世界的規則排序（即靠近“眼睛”的元素，會遮住離“眼睛”遠的元素）。另外，由于`transform-style`屬性是非繼承的，對于中間節點需要顯式設定。 * 對于`transform`屬性：下圖整理了 rotate3d、translate3d 的變換方向： ![transform](https://misc.aotu.io/JChehe/2016-8-24-css-3d-panorama/transform.jpg) 需要注意的是：transform 中的變換屬性的順序是有關系的，如 translateX(10px) rotate(30deg) 與 rotate(30deg) translateX(10px) 是不等價的。另外，需要注意的是 scale 中如果有負值，則該方向會產生 180 度的翻轉；再另外，部分 transform 效果會導致元素（字體）模糊，如 translate 的數值存在小數、通過 translateZ 或 scale 放大元素等等。**每個瀏覽器都有其不同的表現**。 # 實現想象一下，當我們站在十字路口中間，身體旋轉 360°，這個過程中所看到的畫面就是一幅以你為中心的全景圖了。其實，當焦距不變時，我們就等同于站在一個圓柱體的中心。 <br> 但是，虛擬世界與現實世界的最大不同是：沒有東西是連續的，即所有東西都是離散的。例如，你無法在屏幕上顯示一個完美的圓。你只能以一個正多邊形表示圓：邊越多，圓就越“完美”。 <br> 同理，在三維空間中，每個 3D 模型都是一個多面體（即 3D 模型由不可彎曲的平面組成）。當我們討論一個本身就是多面體（如立方體）的模型時并不足以為奇，但我們想展示其它模型時，如球體，就需要記住這個原理了。 ![](https://box.kancloud.cn/669457659424c4edd7ce7ed673caa801_700x405.png) [淘寶造物節的活動頁](http://zwj360.im20.com.cn/)就是 CSS 3D 全景的一個很贊的頁面，它將全景圖分割成 20 等份，相鄰的元素構成的夾角 18°（360/20，相鄰兩側面相對于棱柱中心所構成的夾角）。需要注意的是：我們要確保**每個元素的正面是指向棱柱中心的**。所以要計算好每等份的旋轉角度值后，再將元素向外（即 Z 軸方向）平移`r`px。對于立方體的`r`就是`邊長/2`，而對于其它更復雜的正多面體呢？ <br> 舉例：對于正九棱柱，每個元素的寬為`210px`，對應的角度為`40°`，即如下圖：圖片來自：[https://desandro.github.io/3dtransforms/docs/carousel.html](https://desandro.github.io/3dtransforms/docs/carousel.html) ![](https://box.kancloud.cn/f9dd8bfdfd8dd89f847ed59580515e43_540x402.png) <br> 正九棱柱的俯視圖 ![](https://box.kancloud.cn/1372c2f3eb394b7ecce6b88ac0f70c66_329x383.png) <br> 由此可得到一個公用函數，只需傳入含有**元素的寬度**和**元素數量**的對象，即可得到`r`值： ~~~ function calTranslateZ(opts) { return Math.round(opts.width / (2 * Math.tan(Math.PI / opts.number))) } calTranlateZ({ width: 210, number: 9 }); // 288 ~~~ <br> 另外，為了讓下文易于理解，我們約定 HTML 的結構： ~~~ #view(perspective:1000px) #stage(transform-style:preserve-3d) #cube(transform-style:preserve-3d) .div（width:600px;height:600px;） /*組成立方體的元素*/ ~~~ 正棱柱構建完成后，就需要將我們的“眼睛”放置在正棱柱內。由于在“眼睛”后的元素是不會被瀏覽器渲染的（與`.div元素`是否設置`backface-visibility:hidden;`無關），而且我們保證`.div元素`的**正面**都是指向正棱柱中心，這樣就形成 360° 被環繞的效果了。 <br> 那“眼睛”具體被放置在哪個位置呢？答：通過設置`#stage`元素的`translateZ`值，讓不能被看到的`.div元素`在`Z`軸上的最終坐標值（即其自身`Z`坐標和祖先元素`Z`坐標相加）大于`#view`元素的`perspective`值即可。如：立方體的正面的`translateZ`是`-300px`（為了保證立方體的正面是指向立方體中心，正面元素需要以自身水平方向上的中線為軸，旋轉`180度`，即`rotateY(-180deg) translateZ(-300px)`，即正面元素向“眼球”方向平移了 300px），而`#view`的`perspective`值為`1000px`，那么`#stage`的`translateZ`值應該大于`700px`且小于`1300px`即可，具體數值則取決于你想要的呈現效果。 # 全景圖素材的制作將全景圖制作分為設計類與實景類： ## 設計類要制作類似[《淘寶造物節》](http://zwj360.im20.com.cn/)的全景頁面，設計稿需要有以下這些要求。注：下面提及的具體數據均基于《造物節》，可根據自身要求進行調整（若發現欠缺，歡迎作出補充）。整體背景設計圖如下（2580*1170px，被分成 20 等份）： ![](https://box.kancloud.cn/04490c0c70c89fa2857babce0a1f07e8_1000x453.png) 基本要求： 1. 水平方向上需要首尾相連； 2. 因為效果圖最終需要切成**N 等份**，所以盡可能讓**設計圖的寬度能被 N 整除**； 3. 圖片尺寸不僅要考慮正視圖的大小，還要考慮元素在上下旋轉時依然能覆蓋視野（可選）。當然，上圖只是作為背景，我們還可以添加一些小物體素材（與背景圖的運動速度不同時，可形成視差效果，增強立體感），如： ![](https://box.kancloud.cn/89998bb314fcf600fa7aa0d70d937bc1_516x220.png) ![](https://box.kancloud.cn/e67903fa6d259689f6917fd69cbf9fc1_322x339.png) 小物體元素（虛線用于參考，造物節中共有 21 個小物體）如上圖所示，每個圖片也被等分成 M 等份，而且 M 的寬度應該與 N（背景元素）的寬度相等。對于頂部和底圖圖片，則無特殊要求。 ##實景類如果想制作實景的全景效果，可以看看 Google 街景： [Google 街景](https://www.google.com/streetview/publish/)推薦的設備如下： ![](https://box.kancloud.cn/db3dc95620fd5ccc5efe428156a82d53_1000x1640.png) 如上圖，最實惠的方式就是最后一個選項——[Google 街景 APP](https://www.google.com/streetview/apps/)，該應用提供了全景相機功能，但正如圖片介紹所說，這是需要練習的，因此對操作要求比較高。補充：上周六（2016.8.20）參加了 TGDC 的分享會，嘉賓分享了他們處理全景的方式： 1. 利用 RICOH THETA S 等專業設備拍出全景圖 2. 導出靜態圖像 3. 利用設備專門提供的 APP 或 krpamo tools、pano2vr、Glsky box 等工具將靜態圖像轉為 6 張圖 4. 利用 Web 技術制作可交互的全景圖其中 Web 技術有以下 3 種可選方式（當然，還有其它）： * CSS3（本文所提及的方式） * Three.js * krpano（為全景而生，低級瀏覽器則回退到 Flash），[查看教程](http://krpano.com/docu/tutorials/quickstart/?from=groupmessage&isappinstalled=0#top) # 參考資料 [CSS 3D Panorama - 淘寶造物節技術剖析]([https://aotu.io/notes/2016/08/24/2016-8-24-css-3d-panorama/](https://aotu.io/notes/2016/08/24/2016-8-24-css-3d-panorama/)) [淘寶造物節邀請函]([http://show.im20.com.cn/zwj/](http://show.im20.com.cn/zwj/)) [橫豎屏重力感應的易用組件]([https://github.com/shrekshrek/orienter](https://github.com/shrekshrek/orienter))