Movi Kanti Revo - 第 1 部分 - 建置 3D 世界

Pete LePage

Movi Kanti Revo 標誌。

Movi.Kanti.Revo 是一款由太陽劇團 (Cirque du Soleil) 製作的全新感官體驗 Chrome 實驗，由 Subatomic Systems 開發，透過新型網路技術在網路世界中帶出太陽劇團的奇景。

建立 3D 世界

實驗僅使用 HTML5 建立，環境則完全使用標記和 CSS 建構。就像舞台上的片段，div、img、小型 video 和其他元素也是使用 CSS 在 3D 空間中放置。只要使用新的 getUserMedia API，就能享有全新的實驗互動方式，不必使用鍵盤或滑鼠，而是可以追蹤頭部並隨同移動環境。

所有網路的各階段

要建構這項實驗，最好將瀏覽器想像成一個階段，並使用 CSS 將 <div>、圖片、影片和其他元素等元素當做在 3D 空間中擺放的元素。套用 3D 變形效果，即可讓每個元素或一組元素顯示在舞台上。如果您不熟悉 translate3d 轉換，我們會採用 3 個參數：X、Y 和 Z。X 會沿著水平線移動元素，Y 軸會上下移動元素，Z 則會將元素移近或更遠。舉例來說，套用 transform: translate3d(100px, -200px, 300px) 會將元素向右移動 100 像素，下移 200 像素，距離檢視器較近 300 像素。

建置演藝廳

我們來看看最後一個場景，看看是如何組合起來。所有場景可分為三個主要容器：世界容器、透視容器和階段。世界容器可以有效設定檢視器的相機，並使用 CSS perspective 屬性讓瀏覽器知道觀眾要從哪個地方查看元素。你可以使用 #perspective-container 套用 3D 轉換來改變視角。最後，階段包含要在螢幕上顯示的實際組合。

<div id="world-container">
  <div id="perspective-container">
    <div id="stage">
    </div>
  </div>
</div>

#world-container {
perspective: 700px;
overflow: hidden;
}

#perspective-container {
{ % mixin transform-style: preserve-3d; % }
{ % mixin transform-origin: center center; % }
{ % mixin perspective-origin: center center; % }
{ % mixin transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); % }
}

以視覺化方式呈現階段

最後一個場景有七個元素。這些元素會從天空背景、迷霧圖層、門、水、倒影、反光層，最後的峭壁以及前方的懸崖所組成。每個項目都會放在舞台上，並包含 transform: translate3d(x, y, z) CSS 屬性，用於表示項目可容納 3D 空間的位置。我們使用 z 值的方式與 z-index 類似，但透過 translate3d 屬性，我們也能提供含有值的單位。

圖 1：側邊的舞台
圖 1：側邊的階段。

圖 1 為場景縮小並旋轉近 90 度，這樣您便能視覺化呈現各組不同片段在舞台中的位置。您可在背面 (最靠近左側) 看到背景、起霧、門、水和懸崖。

將背景置於舞台上

先來看看背景圖片。由於是資料最前層，因此我們在 Z 軸上套用了 -990px 轉換，以讓我們的角度思考 (請參見圖 2)。

只有背景放在 -990 像素的階段
圖 2：只有背景位於 -990 像素的階段

物理學向下移動時，物理學會要求縮小，因此必須透過 scale(3.3) 屬性調整大小，以配合可視區域，並將頂端邊緣與可視區域頂端對齊，y 軸則是 translate3d (請參見圖 3)。

.background {
width: 1280px;
height: 800px;
top: 0px;
background-image: url(stars.png);
{ % mixin transform: translate3d(0, 786px, <b>-990px</b>) <b>scale(3.3)</b>; % }
}
圖 3：階段，已調整背景並縮放。
圖 3：只有背景定位和縮放的階段。

霧氣、門和懸崖的相同方式，都是以適當的 Z 位置和縮放比例係數套用 translate3d (請參見圖 4)。請注意起霧是如何從門後方以及懸崖後方堆疊。

圖 4：舞台，有霧、門、懸崖的位置和比例
圖 4：舞台，有霧、門和懸崖的位置和縮放比例。

增加海洋

為了盡可能打造真實的環境，我們明白是不能直接將水放在垂直平面上，而在現實世界中，這通常並不存在。除了套用 translate3d 以在階段中放置水域，我們還套用了 60 度 (rotateX(60deg)) 的 60 度旋轉 (水平) 旋轉，讓水面平坦且紋理化。為門反射和次要霧裡新增了類似的旋轉，以使它出現在正確的平面中 (請參見圖 5)。

.sea {
bottom: 120px;
background-image: url(sea2.png);
width: 1280px;
height: 283px;
{ % mixin transform: translate3d(-100px, 225px, -30px) scale(2.3) <b>rotateX(60deg)</b>; % }
}
圖 5：階段，所有元素都定位並調整大小。
圖 5：在這個階段中，所有元素都會定位並縮放。
>

每個場景都以類似的方式建構，在階段的 3D 空間內以視覺化方式呈現元素，並為每個場景套用適當的轉換。

其他資訊