Interaktiv injener stoli
Aynan shu portfolio: hero qismida kichik Three.js ish stoli boʻlgan Astro sayti — telefon, monitor va daftar saytdagi uch xil ishni ifodalaydi. Maqsad: portfolio oʻqishga xalaqit bermay qancha 3D koʻtara olishini aniqlash.
- Rol
- Dizayner va dasturchi — dizayn tizimi, sayt, 3D sahna
- Qamrov
- Dizayn tizimi, ikki tilli sayt, Three.js hero, accessibility va zaxira holatlar
- Holat
- Jarayonda
- Muddat
- 2026
- Texnologiya
Muammo
Uch xil ish — Android ilovalar, biznes tizimlar va maqolalar — faqat sarlavhalar bilan koʻrsatish qiyin. Vizual sahna buni tezroq qiladi, lekin koʻp 3D portfolio buning evaziga sekin yuklanish, skrollga qarshi turuvchi sahifa va faqat canvas ichida yashaydigan navigatsiyani beradi.
Cheklovlar
- Sarlavha, ikki tugma va navigatsiya 3D yuklanishidan oldin oʻqilishi kerak.
- Sahnadagi har bir manzil oddiy havola sifatida ham mavjud boʻlishi kerak.
- Bitta canvas, faqat hero ichida; ekrandan chiqsa va tab yashiringanda render toʻxtaydi.
- WebGL ishlamasa ham, harakat kamaytirilgan rejimda ham sayt toʻliq ishlashi kerak.
Yechim va muhim qarorlar
Sahna — bitta Draco bilan siqilgan GLB, yoritish baked; frameloop="demand" bilan
render qilinadi: kursor harakatida, hover yoki fokusda va oʻtish paytida bitta
kadr chizadi, keyin toʻxtaydi. Kursor parallaksi birlikning kichik qismi bilan
cheklangan va tinch holatga qaytadi — matn u bilan harakatlanmaydi.
Oʻqiladigan hamma narsa canvas ustidagi HTML, ichidagi tekstura emas — ishora, uchta yorliq va pastdagi havolalar qatori. Aynan shu narsa hero’ni 320px da ham ishlatib turadi, u yerda canvas umuman ulanmaydi.
Yechim 01
Avval poster, keyin canvas
Aynan shu kamera nuqtasidan statik render birinchi paintdan boshlab aspect-ratio blokni toʻldiradi; canvas keyin ulanib, silliq oʻtadi — layout joyidan siljimaydi.
Yechim 02
Hotspotlar — haqiqiy tugmalar
Canvas ustida aria-label bilan uchta 44px shaffof tugma turadi, shuning uchun sahna klaviatura va skrin-riderga ochiq — hamda xuddi shu uch havola pastda matn sifatida ham bor.
Yechim 03
Besh holat, bitta kadr
Poster, interaktiv, soddalashtirilgan, harakatsiz va WebGL-siz holatlar posterning kadrini boʻlishadi — hero qanday pasaysa ham bir xil koʻrinadi.
Ekranlar va oʻzaro taʼsir namunalari
- Skrinshot placeholder
- Skrinshot placeholder
- Skrinshot placeholder
Natijalar
Faqat tasdiqlangan faktlar. Haqiqiy raqam yoki fakt paydo boʻlmaguncha bu blok placeholder holatida qoladi — taxminiy foydalanuvchi, daromad yoki tezlik daʼvolari yoʻq.
Olingan saboqlar
Sahnadan oldin oʻzaro taʼsir jadvalini yozish — trigger, javob, manzil, zaxira — fallbacklarni keyingi ishga qoldirmay, arzon qildi.