Movi.Kanti.Revo ist ein neues sensorisches Chrome-Experiment, das von Cirque du Soleil und von Subatomic Systems entwickelt wurde. Es bringt mithilfe moderner Webtechnologien die Wunder von Cirque du Soleil im Web.
Die 3D-Welt erschaffen
Der Test wurde ausschließlich mit HTML5 erstellt und die Umgebung wurde vollständig mit Markup und CSS erstellt. Wie Bühnenstücke werden div
s, img
s, kleine video
s und andere Elemente mithilfe von CSS in einem 3D-Raum positioniert. Die neue getUserMedia
API ermöglicht eine ganz neue Art der Interaktion mit dem Experiment. Statt mit Tastatur oder Maus erfasst eine JavaScript-Bibliothek zur Gesichtserkennung deinen Kopf und bewegt die Umgebung mit dir.
Das gesamte Web ist eine Bühne
Stellen Sie sich den Browser für dieses Experiment am besten als Bühne vor und die Elemente wie <div>
s, Bilder, Videos und andere Elemente werden mithilfe von CSS im 3D-Raum positioniert. Jedes Element oder Set wird durch Anwendung einer 3D-Transformation im Anzeigebereich positioniert. Wenn Sie mit der translate3d
-Transformation nicht vertraut sind, benötigen Sie drei Parameter: X, Y und Z. X verschiebt das Element entlang einer horizontalen Linie, Y verschiebt es nach oben und unten und Z verschiebt es näher heran oder weiter weg. Wenn Sie beispielsweise transform: translate3d(100px, -200px, 300px)
anwenden, wird das Element um 100 Pixel nach rechts, 200 Pixel nach unten und 300 Pixel näher zum Betrachter verschoben.
Der Bau des Auditoriums
Sehen wir uns die letzte Szene einmal genauer an. Alle Szenen werden in drei primäre Container unterteilt: den Weltcontainer, einen perspektivischen Container und den Anzeigebereich. Der World Container richtet die Kamera des Viewer ein und verwendet die CSS-Eigenschaft perspective
, um dem Browser mitzuteilen, von wo aus der Betrachter das Element betrachten wird. #perspective-container
wird verwendet, um unsere Perspektive durch Anwenden von 3D-Transformationen zu ändern. Schließlich enthält der Anzeigebereich
die eigentlichen Sets, die auf dem Bildschirm zu sehen sind.
<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); % }
}
Bühne visualisieren
Die Endszene zeigt sieben Elemente. Von hinten nach vorn zeigen sie den Himmelshintergrund, eine Nebelschicht, die Türen, das Wasser, Reflexionen, eine weitere Nebelschicht und schließlich die Klippen davor.
Jedes Element wird im Anzeigenbereich mit der CSS-Eigenschaft transform: translate3d(x, y, z)
platziert, die angibt, wie es in den 3D-Raum passt. Wir haben den z-Wert in ähnlicher Weise wie für z-index
verwendet, aber mit dem Attribut translate3d
können wir auch eine Einheit mit dem Wert angeben.
In Abbildung 1 ist die Szene verkleinert und um fast 90 Grad gedreht, sodass Sie sich ansehen können, wie die verschiedenen Sets im Anzeigebereich platziert sind. Auf der Rückseite (ganz links) sind der Hintergrund, der Nebel, die Türen, das Wasser und schließlich die Klippen zu sehen.
Platzieren des Hintergrunds auf einer Bühne
Beginnen wir mit dem Hintergrundbild. Da sie am weitesten zurück ist, haben wir eine -990px-Transformation auf die Z-Achse angewendet, um sie aus unserer Perspektive nach hinten zu verschieben (siehe Abbildung 2).
Wenn es sich in den Weltraum zurückbewegt, muss es kleiner werden. Deshalb muss die Größe über eine scale(3.3)
-Eigenschaft angepasst werden, damit sie in den Darstellungsbereich passt. Außerdem muss der obere Rand am oberen Rand des Darstellungsbereichs an einem translate3d
auf der Y-Achse ausgerichtet werden (siehe Abbildung 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>; % }
}
Nebel, Türen und Klippen auf dieselbe Weise, indem ein translate3d
mit einer geeigneten z-Position und einem geeigneten Skalierungsfaktor angewendet wird (siehe Abbildung 4). Beachten Sie, wie sich hinter den Türen und hinter den Klippen der Nebel lagert.
Das Meer hinzufügen
Um ein möglichst realistisches Umfeld zu schaffen, wussten wir, dass wir das Wasser nicht einfach auf eine vertikale Ebene stellen könnten. So etwas existiert in der realen Welt normalerweise nicht. Zusätzlich zur Positionierung des Wassers im Anzeigebereich wird translate3d
angewendet und eine Drehung um 60 Grad an der x-Achse (horizontal) (rotateX(60deg)
) angewendet, damit es flach und texturiert wirkt.
Die Türreflexion und der sekundäre Nebel wurden um eine ähnliche Drehung gebracht, damit sie in der richtigen Ebene erscheint (siehe Abbildung 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>; % }
}
Jede Szene wurde auf ähnliche Weise erstellt. Elemente wurden im 3D-Raum eines Anzeigebereichs visualisiert und auf jede Szene wurde eine entsprechende Transformation angewendet.