3D va WebGL React'da: Three.js, React Three Fiber va 20-qism yakuni

Qisqacha: Brauzerda 3D — WebGL (va yangi WebGPU): videokarta bilan chiziladigan <canvas>. Uning ustida eng mashhur kutubxona — Three.js: sahna, kamera, yorug'lik, shakllar. React Three Fiber (R3F) — Three.js uchun React renderer'i: <mesh>, <boxGeometry> kabi JSX teglar bilan sahna quriladi. Narxi katta: kanon tajribasida bitta aylanuvchi kub — +233.2 KB gzip, vazifalar ning butun birinchi yuklashidan ko'p. 3D mahsulot ko'rinishi, konfigurator, vizualizatsiya uchun arziydi; "chiroyli fon" uchun — yo'q. Bu dars — ko'rsatkich va 20-qismning yakuni: vazifalar v10 qayerga keldi.

Bu darsda

• WebGL, Three.js va React Three Fiber qatlamlarini farqlaysiz.
• R3F sahnasining asosiy qismlarini (Canvas, mesh, yorug'lik, useFrame) o'qiy olasiz va drei, Spline nima ekanini bilasiz.
• 3D sahnani tezlashtirish usullarini (frameloop="demand", instancing, dpr, lazy) aytasiz.
• 3D qachon arzishini raqam bilan asoslaysiz.
• 20-qism natijasini — vazifalar v10 ning narxi va sifatini — v9 bilan solishtirasiz.

Oldin bilishingiz kerak: 3D transformlar va perspektiva, Motion IV, lazy va code splitting, requestAnimationFrame, Lottie, Rive va AutoAnimate.

1. Nega bu kerak?

«Bahor» yangi xizmat ochmoqchi: to'y va tadbirlar uchun zal ijarasi. Jasur aka saytda zalni "aylanib ko'rish" imkonini xohlaydi: stollar joylashuvi, sahna, chiroqlar. Foydalanuvchi sichqoncha bilan zalni burib ko'rsin, stollar sonini o'zgartirsin.

Bu — haqiqiy 3D. 3D transformlar bilan kartani burish mumkin, lakin xonani, yorug'lik va soyani — yo'q. Buning uchun videokartaga to'g'ridan-to'g'ri gapiradigan API kerak.

Hayotiy o'xshatish: kino. WebGL — kamera va plyonka: kuchli, lekin har kadrni o'zingiz sozlaysiz. Three.js — tayyor studiya: dekoratsiya, chiroqlar, kamera operatori. React Three Fiber — studiyani React tilida boshqaradigan rejissyor: "sahnada stol bor, ustida chiroq" deb yozasiz, qolganini u qiladi.

Bu dars ko'rsatkich (xaritada "ko'rsatkich" deb belgilangan): 3D — o'z kursi bo'lishi mumkin bo'lgan katta soha. Maqsad — xaritani ko'rish, narxni bilish va "kerakmi?" degan savolga javob bera olish.

2. WebGL: eng past qavat

WebGL — brauzerning videokarta (GPU) bilan chizish API'si. U <canvas> elementida ishlaydi. Natija oynasida uni to'g'ridan-to'g'ri sinab ko'ramiz — eng oddiy ish: butun canvas'ni bitta rangga bo'yash.

import { useEffect, useRef, useState } from "react";

const COLORS = [
  [0.11, 0.31, 0.85],
  [0.85, 0.47, 0.11],
];

export default function App() {
  const canvas = useRef(null);
  const [i, setI] = useState(0);
  useEffect(() => {
    const gl = canvas.current.getContext("webgl2");
    if (gl === null) return; // WebGL yo'q — canvas bo'sh qoladi
    const [r, g, b] = COLORS[i];
    gl.clearColor(r, g, b, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);
  }, [i]);
  return (
    <div>
      <canvas
        ref={canvas}
        width={160}
        height={80}
        role="img"
        aria-label="Rang namunasi"
      />
      <p>
        <button onClick={() => setI((i + 1) % 2)}>
          Rangni almashtir
        </button>
      </p>
    </div>
  );
}

Ekranda:

Rangni almashtir

«Ishga tushir» — ko'k to'rtburchak, bosilsa — to'q sariq. Ranglar 0…1 oralig'ida (0.11, 0.31, 0.85 — ko'k). Tekshiruvchimiz (jsdom) canvas chiza olmaydi: getContext null qaytaradi, kod return bilan chiqadi. Shuning uchun Ekranda: da faqat tugma.

Bu bitta rang edi. Uchburchak chizish uchun esa sheyder (shader — GPU'da ishlaydigan kichik dastur, alohida tilda — GLSL) yozish, buferlar yaratish, matritsalarni hisoblash kerak — yuzlab qator. Shuning uchun deyarli hech kim WebGL'ni to'g'ridan-to'g'ri yozmaydi.

WebGPU — WebGL'ning yangi avlodi: zamonaviy GPU imkoniyatlari, hisob-kitob (compute) ham. Three.js'da WebGPU renderer'i ham bor. Lekin ko'p loyihalar hali WebGL'da.

3. Three.js va React Three Fiber

3.1 Three.js: sahna, kamera, renderer

Three.js WebGL ustida "studiya" beradi:

flowchart LR
  S["Scene: sahna"] --> M["Mesh: shakl + material"]
  S --> L["Light: yorug'lik"]
  C["Camera: kamera"] --> R["Renderer: WebGL"]
  S --> R
  R --> V["canvas"]

Mesh = geometriya (shakl: kub, shar, yuklangan model) + material (sirt: rang, yaltiroqlik). Yorug'liksiz meshStandardMaterial qora ko'rinadi — real hayotdagidek. Renderer har kadrda sahnani kamera ko'zi bilan <canvas> ga chizadi.

3.2 React Three Fiber: sahna — JSX

R3F (@react-three/fiber) — React'ning rendereri, xuddi react-dom kabi. react-dom JSX'dan DOM elementlarini yasaydi, R3F esa Three.js obyektlarini. Kanon tajribasidagi kod (tajriba/kitlar/src/k/r3f.tsx, three 0.186.1, @react-three/fiber 9.8.1; formatlangan):

import { useRef } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import type { Mesh } from "three";

function Kub() {
  const r = useRef<Mesh>(null);
  useFrame((_, d) => {
    if (r.current) r.current.rotation.y += d;
  });
  return (
    <mesh ref={r}>
      <boxGeometry />
      <meshStandardMaterial color="green" />
    </mesh>
  );
}

export function Sahna() {
  return (
    <div style={{ height: 300 }}>
      <Canvas>
        <ambientLight />
        <Kub />
      </Canvas>
    </div>
  );
}

O'qiymiz:

• <Canvas> — sahna, kamera va WebGL renderer'ni yaratadi. U ota elementini to'ldiradi — shuning uchun height: 300.
• <mesh>, <boxGeometry>, <meshStandardMaterial> — Three.js sinflari (Mesh, BoxGeometry…) kichik harf bilan. Import kerak emas — R3F ularni nomidan topadi. Props — konstruktor va xususiyatlar.
• useFrame((holat, delta) => …) — har kadrda chaqiriladi (requestAnimationFrame ustida). delta — oldingi kadrdan beri soniyalar: rotation.y += d — sekundiga 1 radian, kompyuter tezligiga bog'liq emas.

useFrame ichida state o'zgartirmang. Ref orqali obyektni to'g'ridan-to'g'ri o'zgartirish — Motion IV dagi motion value g'oyasining o'zi: har kadrda React qayta chizmaydi.

3.3 drei va Spline

• drei (@react-three/drei) — R3F uchun tayyor yordamchilar to'plami: OrbitControls (sichqoncha bilan aylantirish), useGLTF (Blender'dan eksport qilingan .glb modelni yuklash), Environment (yorug'lik muhiti), Html (sahna ichida oddiy HTML). Zal misolidagi "aylanib ko'rish" — bitta <OrbitControls />.
• Spline — brauzerdagi 3D dizayn vositasi (Figma'ga o'xshash). Dizayner sahnani o'zi chizadi, siz uni iframe yoki @splinetool/react-spline komponenti bilan qo'yasiz. Kod yozmasdan 3D — lekin runtime og'ir. Biz uni o'lchamadik.

drei va Spline kanon tajribasida o'lchanmagan. Ular bilan birinchi yuklash yanada ko'payadi.

4. Narx va tezlik

4.1 O'lchov: bitta kub — +233 KB

Bitta yashil kub vazifalar ning butun birinchi yuklashidan (201.8 KB) og'ir. Sababi — Three.js katta: matematika, yorug'lik modellari, sheyderlar to'plami. Tree shaking yordam beradi, lekin "kub + yorug'lik" uchun ham asosiy yadro kerak. CSP — 0 buzilish: Three.js <style> va eval ishlatmaydi.

Bundan tashqari model fayllari: zal modeli (.glb) bir necha MB bo'lishi mumkin — JS'dan ham og'ir. Ularni siqish (Draco, Meshopt) va teksturalarni kichraytirish — 3D loyihaning alohida ishi.

4.2 Tezlashtirish usullari

Standartda R3F har kadrda chizadi (frameloop="always") — sahna qimirlamasa ham, sekundiga 60 marta. Telefonda bu batareyani tez yeydi. "demand" da faqat o'zgarish bo'lganda chiziladi (OrbitControls buni o'zi bildiradi).

4.3 Accessibility

<canvas> — ekran o'quvchi uchun "qora quti": ichida nima borligini u bilmaydi. Shuning uchun:

• canvas'ga matnli muqobil bering (role="img" va aria-label, yuqoridagi WebGL misolidagidek) va muhim ma'lumotni canvas tashqarisida ham ko'rsating: zal sig'imi, stollar soni, narx — oddiy HTML.
• Sichqoncha bilan aylantirishga klaviatura muqobili: "chapga burish" / "o'ngga burish" tugmalari (Bobur uchun).
• Avtomatik aylanish — harakatni kamaytirish yoqilgan bo'lsa, to'xtasin.

5. 3D qachon arziydi

Savollar: 3D olib tashlansa, foydalanuvchi nimanidir yo'qotadimi? Sekin telefonda 233 KB + model + GPU yuklamasi — qabul qilinadimi? Bu sahifa alohida (lazy) yuklanadimi? Uchta "ha" bo'lsa — R3F. Aks holda — rasm, video yoki CSS 3D (3D transformlar).

vazifalar da 3D yo'q va bo'lmaydi: ish vositasi, ustunlik — tezlik. Kanon tajribasi R3F'ni faqat narxni bilish uchun o'lchadi (QADAMLAR, #27–#30).

Tekshirib ko'ring: «Bahor» bosh sahifasida aylanib turadigan 3D osh lagani bor. Bosh sahifa — eng ko'p ochiladigan sahifa. 3D'ni saqlab qolish uchun nima qilasiz?

6. 20-qism yakuni: vazifalar v10

6.1 Nima qurdik

20-qismda vazifalar v9 dan v10 ga o'tdi. 10 ta holat, har biri o'lchov bilan:

• Dizayn tizimi — Tailwind v4 (preflight'siz, tokenlar @theme da), cn() (clsx) va cva bilan Tugma, @/ alias va components.json (shadcn/ui I).
• Headless komponentlar — Radix menyu (modal={false} — CSP) va tooltip, asChild bilan o'z Tugma miz (Radix chuqur).
• Ikonkalar — lucide, 9 ta, aria-hidden (Ikonkalar).
• Ctrl+K buyruqlar oynasi — cmdk, birinchi ochilishda yuklanadi (Command palette).
• Holatlar — bo'sh holat ikonkasi, kechikib chiqadigan skeleton (Yuklanish holatlari).
• Teglar jadvali — TanStack Table v9, aria-sort (TanStack Table).
• «Tartiblash» rejimi — dnd-kit, klaviatura bilan ham, rejim yoqilganda yuklanadi (dnd-kit).
• Animatsiya — CSS (dialog, menyu), Motion (yangi qator, LazyMotion), WAAPI (o'chirish) (CSS animatsiyalari, Motion IV).

Va kanonga kirmaganlar — har biri o'lchov bilan: MUI, AntD, Mantine, Chakra, HeroUI, React Aria, Base UI, sonner, vaul, Radix Dialog, Konva, React Flow, AutoAnimate, AnimatePresence ro'yxatda, <ViewTransition>, GSAP, Lottie/Rive, R3F.

6.2 Narx — har qadamda

Birinchi yuklash JS (gzip) holatma-holat (natijalar/tekshiruv-NN.txt, "JAMI birinchi js"):

Ikki sakrash ko'rinadi. Holat 03 — Radix menyu (+27.2 KB). Holat 25 — Motion va umumiy chunk'lar (+15.1 KB). cmdk (6.3 KB), dnd-kit (15.4 KB), jadval (14.0 KB) va animatsiya yadrosi (14.5 KB) — keyin, kerak bo'lganda. Tuzatishdan oldin birinchi yuklash 219.9 KB edi. 20-qaror 1 bo'yicha cmdk va dnd-kit kech yuklashga o'tkazildi va 201.8 KB ga tushdi.

6.3 Sifat — v9 bilan yonma-yon

Manbalar: lighthouse-tuzatish.txt (Lighthouse 13.5.0, bir sessiyada), tuzatish-inp.txt. «Tartiblash» rejimida INP — 48 / 80 ms (TEXNIK-QARZ 59). Lighthouse bitta o'lchov, ±2–3 ball shovqin. TBT 100 → 50 ms, CLS 0.

Testlar (tekshiruv-25.txt va brauzer natijalari): node:test 203/203, Vitest 65/65; lint, format:check, tip, knip — toza. Brauzer ssenariylari: 13–17-qism 159/159, 18-qism 72/72, 19-qism 100/100, 20-qism 77/77 (Ctrl+K rus tartibida tekshiruvi bilan) — hammasi dist/ da, CSP va Trusted Types ostida. axe — 8 ko'rinishda 0 buzilish.

Halol xulosa: v10 og'irroq va sal sekinroq. Har kilobayt va millisekund qayerdan kelgani ma'lum va qabul qilingan (TEXNIK-QARZ 56, 59). Evaziga — foydalanuvchi uchun yangi imkoniyatlar va a11y'ni buzmagan holda. 20-qismning asosiy saboqi shu: kutubxona bepul emas, uni o'lchab qo'shasiz.

7. Ko'p uchraydigan xatolar

8. Mashqlar

Mashqlar kurs/mashqlar/20/30-3d/ da.

1-mashq (oson): arziydimi?

ha yoki yo'q:

• Mebel do'konida divanni har tomondan aylantirib, rangini tanlash →
• Admin paneldagi "Sozlamalar" sarlavhasi yonida aylanuvchi 3D tishli g'ildirak →
• Toshkent metro xaritasining 3D sxemasi, bekatni bosib ma'lumot olish →

2-mashq (o'rta): 233 KB qancha vaqt?

Funksiya yozing: downloadSeconds(kb, mbit) — kb kilobaytni (1 KB = 1 000 bayt) mbit Mbit/s tezlikda necha soniyada yuklashini qaytarsin (bir xona aniqlik bilan, satr). Keyin uchta tezlik uchun three + R3F (233.2 KB) va vazifalar ning butun birinchi yuklashini (201.8 KB) hisoblang.

Ishora: 1 bayt = 8 bit; 1 Mbit = 1 000 000 bit. toFixed(1) — Matn ↔ son.

// ... funksiyangiz

for (const mbit of [1.6, 10, 50]) {
  const r3f = downloadSeconds(233.2, mbit);
  const app = downloadSeconds(201.8, mbit);
  console.log(`${mbit} Mbit/s: 3D ${r3f} s, ilova ${app} s`);
}

Konsolda:

1.6 Mbit/s: 3D 1.2 s, ilova 1.0 s
10 Mbit/s: 3D 0.2 s, ilova 0.2 s
50 Mbit/s: 3D 0.0 s, ilova 0.0 s

function downloadSeconds(kb, mbit) {
  const bits = kb * 1000 * 8;
  return (bits / (mbit * 1_000_000)).toFixed(1);
}

for (const mbit of [1.6, 10, 50]) {
  const r3f = downloadSeconds(233.2, mbit);
  const app = downloadSeconds(201.8, mbit);
  console.log(`${mbit} Mbit/s: 3D ${r3f} s, ilova ${app} s`);
}

1.6 Mbit/s: 3D 1.2 s, ilova 1.0 s
10 Mbit/s: 3D 0.2 s, ilova 0.2 s
50 Mbit/s: 3D 0.0 s, ilova 0.0 s

3-mashq (qiyin): 3D ko'rinish — faqat so'ralganda

Zal sahifasi: avval poster (🏛️ Zal: 120 o'rin matni), «3D ko'rinish» tugmasi. Bosilganda 3D komponent lazy bilan yuklanadi (natija oynasida — 200 ms dan keyin «3D sahna tayyor» matnini chiqaradigan soxta komponent), yuklanayotganda «3D yuklanmoqda…». WebGL bo'lmasa (supportsWebGL prop false) — tugma o'rnida «3D ko'rinish bu qurilmada mavjud emas», ma'lumot baribir ko'rinsin.

Ishora: Lottie, Rive va AutoAnimate darsidagi poster + lazy naqshi; Suspense fallback (Suspense). Haqiqiy loyihada supportsWebGL — !!document.createElement("canvas").getContext("webgl2").

import { Suspense, lazy, useState } from "react";

function FakeScene() {
  return <p>3D sahna tayyor</p>;
}
// Haqiqiy loyihada: lazy(() => import("./ZalSahnasi"))
const Scene = lazy(
  () =>
    new Promise((resolve) =>
      setTimeout(() => resolve({ default: FakeScene }), 200),
    ),
);

function Hall({ supportsWebGL }) {
  const [show3d, setShow3d] = useState(false);
  return (
    <section>
      <p>🏛️ Zal: 120 o'rin</p>
      {!supportsWebGL && (
        <p>3D ko'rinish bu qurilmada mavjud emas</p>
      )}
      {supportsWebGL && !show3d && (
        <button onClick={() => setShow3d(true)}>3D ko'rinish</button>
      )}
      {show3d && (
        <Suspense fallback={<p>3D yuklanmoqda…</p>}>
          <Scene />
        </Suspense>
      )}
    </section>
  );
}

export default function App() {
  return <Hall supportsWebGL={true} />;
}

🏛️ Zal: 120 o'rin
3D sahna tayyor

4-mashq: Vazifalar qadami — v10 ni o'zingiz o'lchang

Commit yo'q — 20-qism kanoni holat 25 da tugadi. vazifalar v10 da: npm run build (birinchi yuklash JS ~202 KB, CSS ~4.6 KB ekanini toping), npm test (203 va 65), brauzerda Lighthouse mobil (kirgan sahifa). Natijangizni «Sifat — v9 bilan yonma-yon» jadvali bilan solishtiring va farqni yozing.

9. Real ishda

• Elektron tijorat — 3D mahsulot ko'rinishi, "xonangizda ko'ring" (AR). Mebel, avtomobil, poyafzal do'konlari.
• Ko'chmas mulk va arxitektura — kvartira va bino turlari, virtual tur. O'zbekistondagi yangi turar-joy majmualari saytlarida tobora ko'p uchraydi.
• Ma'lumot vizualizatsiyasi va o'yinlar — R3F ekotizimi (drei, @react-three/rapier fizika) bilan.
• Intervyu savollari: "WebGL, Three.js va R3F farqi?", "3D sahnani qanday tezlashtirasiz?", "useFrame ichida nega setState qilinmaydi?", "3D'ni sahifaga qo'shishdan oldin nimani o'lchaysiz?".

Xulosa

• WebGL/WebGPU — GPU bilan <canvas> ga chizish; to'g'ridan-to'g'ri yozish — sheyderlar va yuzlab qator.
• Three.js — sahna, kamera, yorug'lik, mesh; R3F — ularni JSX bilan (<Canvas>, <mesh>, useFrame); drei — tayyor yordamchilar; Spline — dizayner vositasi.
• Narxi: bitta kub — +233.2 KB gzip (kanon tajribasi), CSP 0; model fayllari — alohida og'irlik.
• Tezlik: lazy + poster, frameloop="demand", dpr, instancing; a11y: ma'lumot HTML'da, klaviatura muqobili.
• 3D — mahsulot o'zi 3D bo'lsa arziydi; ish vositasida — yo'q.
• 20-qism yakuni: vazifalar v10 — birinchi yuklash 151.4 → 201.8 KB, Lighthouse 96 → 93, INP 16 → 24 ms, testlar va axe — toza. Har kilobayt o'lchangan va asoslangan.

Keyingi dars: Kalendar va bron qilish UI — 21-qism boshlanadi: media, integratsiyalar va PWA. Qism davomida «Bahor»ga bron kalendari, xaritalar, to'lov va Telegram Mini App qo'shamiz. Oxirida vazifalar PWA va offline-first ilovaga aylanadi — service worker'ni Workbox bilan qayta quramiz.

Manbalar

• Three.js — threejs.org/docs (0.186.1); React Three Fiber — r3f.docs.pmnd.rs (9.8.1): Canvas, useFrame, performance (frameloop, instancing, dpr)
• drei — github.com/pmndrs/drei; Spline — spline.design
• MDN: WebGL API, WebGPU API — developer.mozilla.org/docs/Web/API/WebGL_API
• IlmHamroh kurs tajribasi: vazifalar v10 yakuniy o'lchovlari (hajm, Lighthouse, INP, kutubxonalar hajmi)