Responsive

この瞬間を恐れていたかもしれませんが、ウェブサイトをレスポンシブにする時が来ました！

今、デスクトップバージョンで行ったすべての作業をモバイル用に再現する必要があります！

冗談です 🤭、モバイルでも3Dシーンが見栄えよくなるようにいくつかのテクニックを使用します。

3Dシーンをレスポンシブにするための完璧な解決策は1つではないことを強調したいです。多くの要因に依存します：

• シーンの複雑さ
• 要素の数
• パフォーマンス
• 達成したいこと

CSSの部分では、media queriesを使用して簡単にウェブサイトをレスポンシブにします。

useMobile

3Dシーンをレスポンシブにするために、次の2つのテクニックを使用します：

• 利用可能な幅に基づいてアイテムの基本位置とスケールを変更します。ある閾値を超えると、モバイルバージョンに切り替えます。
• scaleFactorに基づいてアイテムの位置とスケールを微調整します。1980pxの画面ではシーンが完璧に見えますが、1600pxの画面ではどうでしょうか？scaleFactorを使用して、同じルックアンドフィールを維持するためにアイテムの位置とスケールを調整します。

この2つのテクニックを処理するために、src/hooksフォルダーにuseMobileフックを作成しましょう：

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フックを使用してscaleFactorとisMobileの値を格納しています。これにより、値が変更されたときに再レンダリングが強制されます。

アイテムの位置を決めるために使用した完璧な幅とモバイルの閾値を定義するために2つの定数を使用しています。

このフックを他のプロジェクトでも再利用できるように、これらのvariablesにはconfigを使用しないことにしました。