Responsif

Mungkin Anda takut pada momen ini, tetapi saatnya membuat situs web kita responsif!

Sekarang kita perlu membuat ulang semua yang kita lakukan untuk versi desktop tetapi untuk seluler!

Bercanda 🤭, kita akan menggunakan beberapa teknik agar scene 3D kita terlihat bagus di seluler.

Saya ingin menekankan bahwa tidak ada satu solusi sempurna untuk membuat scene 3D responsif. Itu tergantung pada banyak faktor:

• Kompleksitas dari scene
• Jumlah elemen
• Performa
• Apa yang ingin Anda capai

Untuk bagian CSS, kita akan dengan mudah membuat situs web kita responsif dengan media queries.

useMobile

Kita akan menggunakan dua teknik untuk membuat scene 3D kita responsif:

• Mengubah posisi dasar dan skala item berdasarkan lebar yang tersedia. Setelah ambang batas tertentu, kita akan beralih ke versi seluler.
• Menyempurnakan posisi dan skala item berdasarkan scaleFactor. Scene kita terlihat sempurna di layar 1980px, tetapi bagaimana dengan layar 1600px? Kita akan menggunakan scaleFactor untuk menyesuaikan posisi dan skala item agar tetap memiliki tampilan dan nuansa yang sama.

Mari buat sebuah useMobile hook di folder src/hooks untuk menangani kedua teknik ini:

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,
  };
};

Kita menggunakan hook useState untuk menyimpan nilai scaleFactor dan isMobile. Ini akan memaksa re-render ketika nilai berubah.

Kita menggunakan dua konstanta untuk mendefinisikan lebar sempurna yang kita gunakan untuk menentukan posisi item dan ambang batas seluler (ketika kita beralih ke versi seluler).

Saya memilih untuk tidak menggunakan config untuk variabel ini agar hook ini dapat digunakan kembali dalam proyek lain.