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

Movi Kanti Revo 徽标。

Movi.Kanti.Revo 是一项由太阳马戏团打造、Subatomic Systems 开发的全新感官 Chrome 实验,它通过现代 Web 技术将太阳马戏团的奇妙带到了 Web 上。

构建 3D 世界

该实验仅使用 HTML5 创建,并且环境完全由标记和 CSS 构建而成。就像舞台上的布景一样,divimg、小 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:舞台侧面
图 1:舞台侧面。

图 1 显示了缩小并旋转了近 90 度的场景,以便您直观地了解每个不同的布景元素在舞台中的放置方式。在后面(最左侧),您可以看到背景、雾、门、水,最后是悬崖。

将背景放置在舞台上

我们先从背景图片开始。由于它最靠后,因此我们对 Z 轴应用了 -990px 的转换,以便在透视图中将其推回(请参阅图 2)。

仅将背景放置在 -990px 的舞台
图 2:仅将背景放置在 -990px 的舞台

随着它在空间中向后移动,物理定律要求它变小,因此需要通过 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 在舞台上放置水域之外,我们还应用了 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>; % }
}
图 5:舞台,其中包含所有已定位和放大的元素。
图 5:舞台,其中包含所有已定位和放大的元素。
>

每个场景都是以类似的方式构建的,元素在舞台的 3D 空间中可视化,并且对每个元素都应用了适当的转换。

延伸阅读