构建 3D 游戏菜单组件

基本概述了如何构建响应式、自适应且易于访问的 3D 游戏菜单。

Adam Argyle

在这篇博文中，我将分享关于构建 3D 游戏菜单组件的想法。查看演示。

如果你更喜欢视频，可以参考本博文的 YouTube 版本：

概览

视频游戏往往会在 3D 空间中为用户提供富有创意且不寻常的动画菜单。让菜单看起来像是悬浮在空间中一样，在新的 AR/VR 游戏中很受欢迎。今天，我们将重现此效果的基本要素，但添加了自适应配色方案和适应性功能，以方便喜欢减少动作的用户。

HTML

游戏菜单是一个按钮列表。在 HTML 中表示此类文本的最佳方法是：

<ul class="threeD-button-set">
  <li><button>New Game</button></li>
  <li><button>Continue</button></li>
  <li><button>Online</button></li>
  <li><button>Settings</button></li>
  <li><button>Quit</button></li>
</ul>

按钮列表非常适用于屏幕阅读器技术，并且无需 JavaScript 或 CSS 即可工作。

CSS

按钮列表的样式设置大致分为以下几个步骤：

1. 设置自定义属性。
2. Flexbox 布局。
3. 包含装饰性伪元素的自定义按钮。
4. 将元素放置到 3D 空间中。

自定义属性概览

自定义属性通过以下方式帮助消除值歧义：为原本看起来随机的值指定有意义的名称，避免重复代码，并在子项之间共享值。

以下是另存为 CSS 变量的媒体查询（也称为自定义媒体）。这些标签是全局性的，将用于各种选择器，以确保代码简洁易读。游戏菜单组件使用显示屏的动作偏好设置、系统配色方案和颜色范围功能。

@custom-media --motionOK (prefers-reduced-motion: no-preference);
@custom-media --dark (prefers-color-scheme: dark);
@custom-media --HDcolor (dynamic-range: high);

以下自定义属性可管理配色方案并按住鼠标位置值，以使游戏菜单具有交互性，从而实现悬停操作。为自定义属性命名有助于提高代码易读性，因为它可以揭示值的用例或值结果的易记名称。

.threeD-button-set {
  --y:;
  --x:;
  --distance: 1px;
  --theme: hsl(180 100% 50%);
  --theme-bg: hsl(180 100% 50% / 25%);
  --theme-bg-hover: hsl(180 100% 50% / 40%);
  --theme-text: white;
  --theme-shadow: hsl(180 100% 10% / 25%);

  --_max-rotateY: 10deg;
  --_max-rotateX: 15deg;
  --_btn-bg: var(--theme-bg);
  --_btn-bg-hover: var(--theme-bg-hover);
  --_btn-text: var(--theme-text);
  --_btn-text-shadow: var(--theme-shadow);
  --_bounce-ease: cubic-bezier(.5, 1.75, .75, 1.25);

  @media (--dark) {
    --theme: hsl(255 53% 50%);
    --theme-bg: hsl(255 53% 71% / 25%);
    --theme-bg-hover: hsl(255 53% 50% / 40%);
    --theme-shadow: hsl(255 53% 10% / 25%);
  }

  @media (--HDcolor) {
    @supports (color: color(display-p3 0 0 0)) {
      --theme: color(display-p3 .4 0 .9);
    }
  }
}

浅色和深色主题背景圆锥背景

浅色主题采用充满活力的 cyan 到 deeppink 圆锥渐变，而深色主题则采用深色细微圆锥渐变。如需详细了解圆锥渐变的效果，请参阅 conic.style。

html {
  background: conic-gradient(at -10% 50%, deeppink, cyan);

  @media (--dark) {
    background: conic-gradient(at -10% 50%, #212529, 50%, #495057, #212529);
  }
}

启用 3D 透视

对于存在于网页的 3D 空间中的元素，需要初始化具有透视的视口。我选择将视角放在 body 元素上，并使用视口单元来创建我喜欢的样式。

body {
  perspective: 40vw;
}

这就是观点的影响类型。

设置 <ul> 按钮列表的样式

此元素负责整个按钮列表宏布局，以及一个互动式的 3D 浮动卡片。您可以通过以下方法实现该目标。

按钮组布局

Flexbox 可以管理容器布局。使用 flex-direction 将 Flex 的默认方向从行更改为列，并通过将 align-items 的 stretch 更改为 start，确保每一项都是其内容大小。

.threeD-button-set {
  /* remove <ul> margins */
  margin: 0;

  /* vertical rag-right layout */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5vh;
}

接下来，将容器设置为 3D 空间上下文，并设置 CSS clamp() 函数，以确保卡片的旋转角度不会超出清晰可辨的旋转。请注意，夹扣的中间值是自定义属性，稍后在鼠标互动时通过 JavaScript 设置这些 --x 和 --y 值。

.threeD-button-set {
  …

  /* create 3D space context */
  transform-style: preserve-3d;

  /* clamped menu rotation to not be too extreme */
  transform:
    rotateY(
      clamp(
        calc(var(--_max-rotateY) * -1),
        var(--y),
        var(--_max-rotateY)
      )
    )
    rotateX(
      clamp(
        calc(var(--_max-rotateX) * -1),
        var(--x),
        var(--_max-rotateX)
      )
    )
  ;
}

接下来，如果访问用户的动作可以接受，请使用 will-change 向浏览器添加提示，说明此项的转换将不断变化。此外，您还可以通过在转换上设置 transition 来启用插值。当鼠标与卡片互动时，将会发生这种过渡，从而顺畅地过渡到旋转变化。该动画是一个持续运行的动画，用于演示卡片所在的 3D 空间，即使鼠标无法与该组件互动，也是如此。

@media (--motionOK) {
  .threeD-button-set {
    /* browser hint so it can be prepared and optimized */
    will-change: transform;

    /* transition transform style changes and run an infinite animation */
    transition: transform .1s ease;
    animation: rotate-y 5s ease-in-out infinite;
  }
}

rotate-y 动画仅会在 50% 设置中间关键帧，因为浏览器会将 0% 和 100% 默认设置为元素的默认样式。这是需要在同一位置开始和结束的交替动画的简写形式。这是阐明无限交替动画的好方法。

@keyframes rotate-y {
  50% {
    transform: rotateY(15deg) rotateX(-6deg);
  }
}

设置 <li> 元素的样式

每个列表项 (<li>) 都包含按钮及其边框元素。更改了 display 样式，因此该项不会显示 ::marker。position 样式设为 relative，这样接下来的按钮伪元素就能位于该按钮所使用的整个区域内。

.threeD-button-set > li {
  /* change display type from list-item */
  display: inline-flex;

  /* create context for button pseudos */
  position: relative;

  /* create 3D space context */
  transform-style: preserve-3d;
}

设置 <button> 元素的样式

设置按钮样式可能很困难，需要考虑许多状态和互动类型。由于平衡了伪元素、动画和互动，这些按钮很快会变得很复杂。

初始 <button> 样式

以下是可支持其他状态的基础样式。

.threeD-button-set button {
  /* strip out default button styles */
  appearance: none;
  outline: none;
  border: none;

  /* bring in brand styles via props */
  background-color: var(--_btn-bg);
  color: var(--_btn-text);
  text-shadow: 0 1px 1px var(--_btn-text-shadow);

  /* large text rounded corner and padded*/
  font-size: 5vmin;
  font-family: Audiowide;
  padding-block: .75ch;
  padding-inline: 2ch;
  border-radius: 5px 20px;
}

按钮伪元素

按钮的边框不是传统边框，而是带边框的绝对位置伪元素。

这些元素对于展示所建立的 3D 视角至关重要。其中一个伪元素会被推离按钮，另一个伪元素会拉离用户。顶部按钮和底部的按钮效果最明显。

.threeD-button button {
  …

  &::after,
  &::before {
    /* create empty element */
    content: '';
    opacity: .8;

    /* cover the parent (button) */
    position: absolute;
    inset: 0;

    /* style the element for border accents */
    border: 1px solid var(--theme);
    border-radius: 5px 20px;
  }

  /* exceptions for one of the pseudo elements */
  /* this will be pushed back (3x) and have a thicker border */
  &::before {
    border-width: 3px;

    /* in dark mode, it glows! */
    @media (--dark) {
      box-shadow:
        0 0 25px var(--theme),
        inset 0 0 25px var(--theme);
    }
  }
}

3D 转换样式

在 transform-style 下，设置为 preserve-3d，以便子元素可以在 z 轴上留出自己的空间。transform 已设置为 --distance 自定义属性，此属性会在悬停和聚焦时增加。

.threeD-button-set button {
  …

  transform: translateZ(var(--distance));
  transform-style: preserve-3d;

  &::after {
    /* pull forward in Z space with a 3x multiplier */
    transform: translateZ(calc(var(--distance) / 3));
  }

  &::before {
    /* push back in Z space with a 3x multiplier */
    transform: translateZ(calc(var(--distance) / 3 * -1));
  }
}

条件动画样式

如果用户的动作正常，该按钮会提示浏览器转换属性应已准备好进行更改，并且已为 transform 和 background-color 属性设置转换。注意持续时间的差异，我觉得它产生了很好的微妙交错效果。

.threeD-button-set button {
  …

  @media (--motionOK) {
    will-change: transform;
    transition:
      transform .2s ease,
      background-color .5s ease
    ;

    &::before,
    &::after {
      transition: transform .1s ease-out;
    }

    &::after    { transition-duration: .5s }
    &::before { transition-duration: .3s }
  }
}

悬停和焦点互动样式

互动动画的目标是分布组成平面显示按钮的图层。您可以通过将 --distance 变量（最初设为 1px）来完成此操作。以下代码示例中显示的选择器用于检查按钮是否正被某个设备悬停或被聚焦于应看到焦点指示标志的设备，以及未被激活。如果是，它会应用 CSS 来执行以下操作：

• 应用悬停背景颜色。
• 增加距离 。
• 添加弹跳缓和效果。
• 交错伪元素过渡。

.threeD-button-set button {
  …

  &:is(:hover, :focus-visible):not(:active) {
    /* subtle distance plus bg color change on hover/focus */
    --distance: 15px;
    background-color: var(--_btn-bg-hover);

    /* if motion is OK, setup transitions and increase distance */
    @media (--motionOK) {
      --distance: 3vmax;

      transition-timing-function: var(--_bounce-ease);
      transition-duration: .4s;

      &::after  { transition-duration: .5s }
      &::before { transition-duration: .3s }
    }
  }
}

对于 reduced 运动偏好设置，3D 视角仍然非常简洁。顶部和底部的元素以细微的方式展示效果。

通过 JavaScript 进行小幅改进

该界面已经可以通过键盘、屏幕阅读器、游戏手柄、触摸和鼠标使用，但我们还可以添加一些简单的 JavaScript，以简化几种情况。

支持箭头键

使用 Tab 键是导航菜单的好方法，但我希望方向键或操纵杆能够在游戏手柄上移动焦点。通常用于 GUI 验证界面的 roving-ux 库将为我们处理箭头键。以下代码会指示库将焦点置于 .threeD-button-set 内，并将焦点转发给按钮子级。

import {rovingIndex} from 'roving-ux'

rovingIndex({
  element: document.querySelector('.threeD-button-set'),
  target: 'button',
})

鼠标视差互动

跟踪鼠标并使其倾斜菜单旨在模拟 AR 和 VR 视频游戏界面，在此类界面上，您可能使用虚拟指针而不是鼠标。当元素能够非常感知指针时，这会很有趣。

因为这是一个小的额外功能，所以我们将把互动置于查询用户的动作偏好之后。此外，在设置过程中，请使用 querySelector 将按钮列表组件存储到内存中，并将元素的边界缓存到 menuRect 中。使用这些边界来确定根据鼠标位置向卡片应用的旋转偏移量。

const menu = document.querySelector('.threeD-button-set')
const menuRect = menu.getBoundingClientRect()

const { matches:motionOK } = window.matchMedia(
  '(prefers-reduced-motion: no-preference)'
)

接下来，我们需要一个函数，该函数接受鼠标 x 和 y 位置，并返回一个可用于旋转卡片的值。以下函数使用鼠标位置来确定它在框的哪一侧以及所占的比例。增量是从函数返回的。

const getAngles = (clientX, clientY) => {
  const { x, y, width, height } = menuRect

  const dx = clientX - (x + 0.5 * width)
  const dy = clientY - (y + 0.5 * height)

  return {dx,dy}
}

最后，观察鼠标移动，将位置传递给 getAngles() 函数，并将增量值用作自定义属性样式。我用 20 除以 20 来填补增量并使其不那么颤抖，也许有更好的办法可以做到这一点。如果您一开始就记得，我们将 --x 和 --y 属性放在 clamp() 函数的中间，这样可以防止鼠标位置过度将卡片旋转到难以辨认的位置。

if (motionOK) {
  window.addEventListener('mousemove', ({target, clientX, clientY}) => {
    const {dx,dy} = getAngles(clientX, clientY)

    menu.attributeStyleMap.set('--x', `${dy / 20}deg`)
    menu.attributeStyleMap.set('--y', `${dx / 20}deg`)
  })
}

翻译和路线

在其他编写模式和语言下测试游戏菜单时，有一个问题。

用户代理样式表中 <button> 元素的 writing-mode 样式为 !important。这意味着需要更改游戏菜单 HTML 以适应所需设计。将按钮列表更改为链接列表会使逻辑属性能够更改菜单方向，因为 <a> 元素不具有浏览器提供的 !important 样式。

总结

现在您已经知道我是如何做到的了，可以怎么做？‽ 🙂? 能否在菜单中添加加速度计互动功能，以便平铺手机来旋转菜单？我们能改善无动作效果吗？

下面，我们就来介绍一下我们的方法多样化，并了解在 Web 上构建网站的所有方法。 只需创建一个演示，点击 tweet me 链接，我就会将其添加到下方的“社区混剪”部分中！

社区混剪作品

此处尚无可显示的内容！