响应式

也许你害怕这一刻，但现在是让我们的网站变得响应式的时候了！

现在我们需要为移动设备重现我们为桌面版所做的一切！

开玩笑的 🤭，我们将使用一些技术来让我们的 3D 场景在移动设备上看起来不错。

我想强调，没有一种完美的解决方案可以让 3D 场景变得响应式。这取决于很多因素：

• 场景的复杂性
• 元素的数量
• 性能
• 你想要实现的目标

对于 CSS 部分，我们将使用 media queries 来轻松地使我们的网站响应式。

useMobile

我们将使用两种技术来使我们的 3D 场景响应式：

• 根据可用宽度更改项目的基础位置和比例。在达到某个阈值后，我们将切换到移动版本。
• 基于 scaleFactor 微调项目的位置和比例。我们的场景在 1980px 屏幕上看起来很完美，但在 1600px 屏幕上呢？我们将使用 scaleFactor 来调整项目的位置和比例，以保持相同的外观和感觉。

让我们在 src/hooks 文件夹中创建一个 useMobile hook 来处理这两种技术：

Copy
import { useState } from "react";

const REFERENCE_WIDTH = 1920;
const MOBILE_THRESHOLD = 990;

export const useMobile = () => {
  const [scaleFactor, setScaleFactor] = useState(
    window.innerWidth / REFERENCE_WIDTH
  );
  const [isMobile, setIsMobile] = useState(
    window.innerWidth <= MOBILE_THRESHOLD
  );
  return {
    scaleFactor,
    isMobile,
  };
};

我们使用 useState hook 来存储 scaleFactor 和 isMobile 值。当这些值改变时，这将强制重新渲染。

我们使用两个常量来定义用于定位项目的完美宽度以及移动阈值 （当我们切换到移动版本时）。

我选择不使用 config 来处理这些 variables 以使此 hook 在其他项目中可重用。