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

Pete LePage

Movi.Kanti.Revo 是太阳马戏团 (Cirque du Soleil) 精心策划的新 Chrome 感官实验，亚原子系统将太阳马戏团的奇妙呈现在网络上现代网络技术。

构建 3D 世界

仅使用 HTML5 创建了实验，且环境已构建完全使用标记和 CSS点赞阶段、div、img、小 video 和使用 CSS 在 3D 空间中定位其他元素。使用新的 getUserMedia API 支持一种全新的方式，而不是使用键盘或鼠标检测库会追踪您的头部，并随着您一起移动环境。

网络世界的舞台

要构建此实验，最好将浏览器想象成一个阶段， <div>、图片、视频和其他元素使用 CSS 在 3D 空间中放置作品。每个元素或设置部分通过应用 3D 转换在场景上定位。如果您不熟悉 translate3d 转换，它接受 3 个参数：X、Y 和 Z。X 沿水平线移动元素，Y 可上下移动元素，和 Z 可将元素移近或移远。例如，将 transform: translate3d(100px, -200px, 300px)会移动该元素距右侧 100 像素，距底部 200 像素，距观看广告。

礼堂建设

下面我们来看一下场景，并了解其整合方式。所有场景分为三个主要容器：世界容器、透视容器以及场景。世界容器可有效设置查看者摄像头，并且使用 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 度的场景，您可以直观地看到每个不同组装件在阶段。在后面（最左侧），您可以看到背景、雾气门、水，最后是悬崖。

将背景放置在 Stage 上

我们先从背景图片开始。由于这里距离最远，因此我们对 Z 轴应用了 -990px 的转换，将其推回我们的视角（参见图 2）。

舞台，仅背景在 -990 像素处 — </ph> 图 2：场景仅以 -990 像素放置背景

当它移动到太空时，物理学要求它变得更小，因此它需要通过 scale(3.3) 属性调整大小以适应视口，将上边缘与视口的顶部对齐，并 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）。注意看车门后面和车门后面都堆积着雾气悬崖峭壁

添加海洋

要创造尽可能贴近现实的环境，我们知道不能简单地将水放到垂直平面上，在 Google 的数据中心里，真实世界。除了将 translate3d 应用于将水放到场景上，我们还会沿 X 轴（水平）旋转 60 度 (rotateX(60deg))，使图片看起来平坦且有纹理。门的反光和二次雾化也增加了类似的旋转效果它显示在正确的平面上（参见图 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 空间，并且对每个空间应用了适当的转换。