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

Pete LePage

Movi.Kanti.Revo 是由太阳马戏团 (Cirque du Soleil) 制作并由 Subatomic Systems 开发的新的 Chrome 感官实验实验，该实验通过现代网络技术将太阳马戏团 (Cirque du Soleil) 的奇迹带入了网络。

构建 3D 世界

此实验仅使用 HTML5 创建，且环境完全使用标记和 CSS 构建。与场景上的布景一样，div、img、小型 video 及其他元素会使用 CSS 在 3D 空间中定位。使用新的 getUserMedia API 可实现一种与实验互动的全新方式，而无需使用键盘或鼠标，JavaScript 人脸检测库会跟踪您的头部并随着您移动环境。

所有网络都是一个舞台

若要构建此实验，最好将浏览器想象成一个场景，并使用 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 转换来改变视角。最后，Stage 包含将显示在屏幕上的实际布景组件。

<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); % }
}

直观呈现场景

在场景中，最终场景中有 7 个元素。这些图像从后到前移动，呈现的是天空背景、雾层、门、水、倒影、另外一个雾层，最后是前方的悬崖。每个项被放置在界面上，并使用 transform: translate3d(x, y, z) CSS 属性指示其在 3D 空间中的放置位置。我们使用 z 值的方式与使用 z-index 类似，但借助 translate3d 属性，我们也可以提供一个具有此值的单位。

图 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>; % }
}

以相同的方式呈现雾、门和悬崖，每个视图都通过应用具有适当 z 位置和缩放比例的 translate3d（参见图 4）。注意观察门后和悬崖背后的雾气。

图 4：场景，其中有雾、门和悬崖已调整好位置和比例 — 图 4：显示雾、门和悬崖的位置和缩放比例的场景。

添加海洋

为了打造尽可能逼真的环境，我们知道不能简单地将水放在垂直平面上，在现实世界中，水通常并不存在。除了应用 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>; % }
}

图 5：场景，其中所有内容都已定位和缩放。 — 图 5：场景，已放置所有内容并对其进行缩放。

每个场景均以相似的方式构建，元素在场景的 3D 空间内直观呈现，并对每个场景应用相应的转换。