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

发布于 2023-05-13 22:26:29 字数 7483 浏览 77 评论 0

Movi Kanti Revo 标志

Movi.Kanti.Revo 是由太阳马戏团制作并由亚原子系统开发的全新感官 Chrome 实验，它通过现代网络技术将太阳马戏团的奇迹带到了网络上。

构建 3D 世界

该实验仅使用 HTML5 创建，环境完全由标记和 CSS 构建。就像舞台上的布景， div秒， img小号 videos 和其他元素使用 CSS 定位在 3D 空间中。使用新的 getUserMediaAPI 启用了一种全新的与实验交互的方式，而不是使用键盘或鼠标，JavaScript 面部检测库会跟踪您的头部并与您一起移动环境。

其他案例研究

这是介绍如何构建此 Chrome 实验的系列文章中的第一篇。每个人都将专注于一项不同的技术，并解释如何使用它来创造这种身临其境的体验。

所有网络都是一个舞台

要构建此实验，最好将浏览器想象成一个舞台，元素如 <div>使用 CSS 将 s、图像、视频和其他元素定位在 3D 空间中。每个元素或布景都通过应用 3D 变换定位在舞台上。如果您不熟悉 translate3dtransform，它有3个参数，X，Y和Z。X沿水平线移动元素，Y使元素上下移动，Z使元素靠近或远离。例如，应用一个 transform: translate3d(100px, -200px, 300px)会将元素向右移动 100 像素，向下移动 200 像素，并向观察者靠近 300 像素。

建造礼堂

让我们看一下最后一个场景，看看它是如何组合在一起的。所有场景都被分解为三个主要容器：世界容器、透视容器和舞台。世界容器有效地设置了观众相机，并使用 CSS perspective属性告诉浏览器查看者将从哪里查看元素。这 #perspective-container用于通过对其应用 3D 变换来改变我们的视角。最后，舞台包含将在屏幕上可见的实际布景。

<div>
  <div>
    <div>
    </div>
  </div>
</div>

#world-container {
  perspective: 700px;
  overflow: hidden;
}

#perspective-container {
  +transform-style: preserve-3d;
  +transform-origin: center center;
  +perspective-origin: center center;
  +transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

可视化舞台

在舞台中，最终场景中有七个元素。从后向前移动，它们包括天空背景、雾层、门、水、反射、额外的雾层，最后是前面的悬崖。每个项目都放在舞台上 transform: translate3d(x, y, z)指示它在 3D 空间中适合的位置的 CSS 属性。我们以类似的方式使用 z 值 z-index, 但随着 translate3d财产，我们也可以提供一个单位的价值。

图 1：侧面的舞台。

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

在舞台上放置背景

让我们从背景图像开始。由于它位于最后方，我们在 Z 轴上应用了 -990px 变换以将其推回我们的视角（参见图 2）。

图 2：舞台，只有背景位于 -990 像素

当它在太空中向后移动时，物理学要求它变小，因此需要通过 scale(3.3)属性以适合视口并将顶部边缘与视口顶部对齐 translate3d在 y 轴上（参见图 3）。

.background {
  width: 1280px;
  height: 800px;
  top: 0px;
  background-image: url(stars.png);
  +transform: translate3d(0, 786px, -990px) scale(3.3);
}

图 3：舞台，仅定位和缩放背景。

雾以同样的方式、门和悬崖，分别应用 translate3d具有适当的 z 位置和比例因子（参见图 4）。注意雾是如何在门后和悬崖后面堆积起来的。

图 4：舞台，有雾、门和悬崖定位和缩放。

添加海

为了创造尽可能逼真的环境，我们知道我们不能简单地将水放在垂直面上，现实世界中通常不会那样存在。除了应用 translate3d为了将水放置在舞台上，我们还应用了 60 度的 x 轴（水平）旋转（ rotateX(60deg)) 使其看起来平坦且有质感。向门反射和二次雾添加了类似的旋转，使其出现在正确的平面中（参见图 5）。

.sea {
  bottom: 120px;
  background-image: url(sea2.png);
  width: 1280px;
  height: 283px;
  +transform: translate3d(-100px, 225px, -30px) scale(2.3) rotateX(60deg);
}

图 5：舞台，一切都已定位和缩放。

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

改变视角

在下一篇文章中，我们将更深入地介绍透视图，但为了激发您的胃口，请打开图 5 并使用 Chrome 开发人员工具尝试使用 transform3d和 rotateX, rotateY和 rotateZ上的属性 #perspective-container. 尝试单独更改每个值并查看它们如何更改视图。