
Movi.Kanti.Revo 是 Cirque du Soleil 打造、Subatomic Systems 開發的新感官 Chrome 實驗,透過新式網路技術將 Cirque du Soleil 的奇幻世界帶到網路上。
建構 3D 世界
實驗是使用 HTML5 建立的,環境則完全採用標記和 CSS 建構而成。就像舞台上的道具一樣,div
、img
、小型 video
和其他元素會使用 CSS 定位在 3D 空間中。使用新的 getUserMedia
API 可啟用全新的互動方式,不必使用鍵盤或滑鼠,而是透過 JavaScript 臉部偵測程式庫追蹤頭部,並隨著頭部移動環境。
網路就是舞台
如要建立這項實驗,請將瀏覽器視為舞台,而 <div>
、圖片、影片和其他元素等元素則視為使用 CSS 在 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 顯示縮小及旋轉近 90 度的場景,讓您能以視覺化方式瞭解各個不同的場景片段如何放置在舞台中。在後方 (最左邊),您可以看到背景、霧、門、水,最後是懸崖。
將背景放置在舞台上
我們先從背景圖片開始。由於它是最遠的物件,我們在 Z 軸上套用了 -990 像素的變形,將其推回我們的視角 (請見圖 2)。

隨著在空間中移動,物理要求會使其變小,因此需要透過 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>; % }
}

以相同的方式處理霧、門和懸崖,每個項目都會套用具有適當 z 位置和縮放比例的 translate3d
(請見圖 4)。請注意,門後和懸崖後方的霧氣是如何堆疊。

新增 Sea
為了盡可能打造逼真的環境,我們知道不能將水直接放在垂直平面上,因為真實世界中通常沒有這種情況。除了套用 translate3d
將水位於舞台上,我們也套用 60 度 (rotateX(60deg)
) 的 x 軸 (水平) 旋轉角度,讓水看起來平坦且有紋理。我們也為門的反射和次要霧氣加入類似的旋轉效果,讓這些效果顯示在正確的平面上 (請見圖 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>; % }
}

每個場景都以類似的方式建構,元素會在舞台的 3D 空間中顯示,並為每個場景套用適當的轉換。