Kod yozishni bilmasdan ham 3D animatsiya yaratish mumkinmi? Remotion Skill + Three.js

Kod yozishni bilmasdan ham 3D animatsiya yaratish mumkinmi? Remotion Skill + Three.js bo‘yicha to‘liq qo‘llanma

3D animatsiya yaratish uchun ilgari nimalar kerak edi?

Avval Blender yoki Maya dasturlarini o‘rganishingiz kerak edi: modellashtirish, tekstura berish, yoritish, skelet bog‘lash, animatsiya egri chiziqlarini sozlash, render parametrlarini belgilash. Bunga bir necha oy ketardi. Kod orqali ishlash esa yanada murakkab: WebGL pipeline, GLSL shaderlari, matritsa transformatsiyalari, Three.js’ning o‘nlab API’lari. Oddiy aylanadigan kub yaratish uchun ham ikki yuz qator kod yozish kerak bo‘lardi.

Hozir-chi?

Vositalarni o‘rnating, bitta prompt yozing, AI siz uchun hajmli sahna yaratadi. Studio’da real vaqt rejimida ko‘ring, ko‘nglingizdagidek sozlang, skrinshot oling, eksport qiling va do‘stlaringiz bilan ulashing.

Ushbu maqola butun jarayonni tushuntiradi. Buning uchun bir qator ham kod yozishingiz shart emas.

I. Ushbu “sehr”ni yaratadigan uchta vosita

Remotion Skill: siz aytasiz, u kod yozadi

Remotion aslida React yordamida video yaratish uchun mo‘ljallangan ochiq kodli framework (GitHub’da 45K+ yulduz). Ammo siz uchun eng muhimi uning Agent Skill funksiyasi: 2026-yil yanvarida chiqarilgan AI plagini, birinchi haftadayoq 25K+ marta o‘rnatilgan.

Uni o‘rnatgach, Claude Code’da kerakli animatsiyani tabiiy tilda tasvirlaysiz, AI esa kodni avtomatik yozadi. Chap tomonda real vaqt rejimidagi ko‘rish oynasi bo‘ladi, natijani istalgan vaqtda tekshirib, xohlagan paytda o‘zgartirishingiz mumkin.

Three.js / WebGL: brauzerdagi 3D dvigatel

Three.js WebGL’ning murakkabligini yashiradi. Vertex buffer yoki shader kompilyatsiyasi nima ekanini bilishingiz shart emas. Sizga faqat “projektor nuri ostida aylanadigan metall shar kerak” deb aytish kifoya, qolganini Three.js ekranda chizib beradi.

@remotion/three: 3D’ni videoga joylash

Remotion jamoasi buning uchun maxsus ko‘prik paketini yaratgan. U Three.js 3D sahnasini Remotion video vaqt shkalasi bilan sinxronlashtiradi. Har bir kadrda qanday tasvir hosil bo‘lsa, MP4 eksportida ham xuddi shunday ko‘rinadi.

Bu uchta vosita birgalikda shuni anglatadi: siz AI’ga bitta gap aytasiz, u esa siz uchun 3D animatsion video yaratadi.

II. Nimalarni tayyorlash kerak? Besh daqiqada bitadi

Sizga kerak bo‘ladigan narsalar juda oddiy:

1. Node.js’ni o‘rnating

nodejs.org saytiga kirib yuklab oling va “Keyingi” tugmasini bosib boring. Bu Remotion’ni ishga tushirish uchun asosiy muhit.

2. Remotion loyihasini yarating

Terminalni oching (Windows’da u “Buyruqlar satri” yoki PowerShell deb ataladi) va quyidagini kiriting:

npx create-video@latest

Loyiha nomini so‘raydi, standart shablonlardan birini tanlang. Bir daqiqada tayyor bo‘ladi.

3. Remotion Skill va 3D qo‘llab-quvvatlashini o‘rnating

npx skills add remotion-dev/skills 

npm i three @react-three/fiber @remotion/three @types/three

Ikki buyruqni nusxalab joylashtiring va Enter bosing. Shundan keyin Claude Code’da Remotion bilan bog‘liq istalgan gapni yozsangiz, AI “3D animatsiya yordamchisi” rejimini avtomatik faollashtiradi.

4. Ko‘rish oynasini ishga tushiring

npx remotion studio

Brauzer oynasi avtomatik ochiladi. Keyin yaratgan har bir 3D sahnangiz shu oynada real vaqt rejimida ko‘rsatiladi.

III. Asosiy muammo: xayoldagi tasvirni qanday “aytish” kerak?

Muhitni sozlash atigi besh daqiqa vaqt oldi. Asosiy qiyinchilik shu yerda: AI’ga “men zo‘r 3D animatsiya xohlayman” desangiz, uning tushunchasi bilan xayolingizdagi tasvir o‘rtasida ulkan tafovut paydo bo‘ladi.

Matn tabiatan 3D tasvirni ifodalash vositasi emas. Bu sizning aybingiz emas.

Quyidagi to‘rt usul bu tafovutni yengishga yordam beradi. Ular uchun texnik bilim emas, muloqot mahorati kerak.

1-usul: namunaviy rasm yuboring (eng samarali)

Xohlagan natijangizga o‘xshash rasm toping: konsept dizayn, filmdan kadr yoki boshqalarning ishidan skrinshot bo‘lishi mumkin. Rasmni to‘g‘ridan-to‘g‘ri Claude Code suhbat oynasiga sudrab tashlang:

“Remotion + Three.js yordamida shunga o‘xshash ko‘rinish yarating. Oltin rangni ko‘kka o‘zgartiring, shar sirtini yanada silliq qiling.”

Bitta rasm metall yuzadagi akslanish darajasi, zarralar zichligi, yorug‘lik qattiqligi, rang yo‘nalishi va kompozitsiya markazi kabi ma’lumotlarni bir zumda yetkazadi. Bularni yuzlab so‘z bilan ham aniq tushuntirish qiyin.

2-usul: bosqichma-bosqich takrorlang, hammasini birdan aytmang

Yangi boshlovchilar eng ko‘p qiladigan xato: barcha talablarni bitta promptga yozish. Natijada odatda hammasi buziladi.

To‘g‘ri usul — har bir bosqichda faqat bitta jihatni sozlash:

Birinchi gap: “Shar yarating va uni Y o‘qi atrofida sekin aylantiring.”  （Studio’da shar aylanganini ko‘rdingiz → davom eting。）  Ikkinchi gap: “Sharning materialini shaffof oynaga o‘zgartiring. Yuqori chap tomondan yorug‘lik tushsin.”  （Shisha shar tayyor → davom eting。）  Uchinchi gap: “Atrofga yulduz halqasiga o‘xshab sharni aylanadigan mayda zarralar qo‘shing. Ular yaltirasin.”  To‘rtinchi gap: “Dastlabki ikki soniyada zarralar sekin paydo bo‘lsin, o‘rtadagi bir soniyada birdan tezlashsin, oxirida esa tarqalsin.”

To‘rt bosqichli suhbat jami o‘n daqiqa davom etadi. Har bir qadamda natijani darhol ko‘rasiz va xato qaysi bosqichda yuz berganini tezda bilasiz. Mukammal tavsifni o‘ylab topib, keyin yarim kun bug tuzatishdan ancha tez.

3-usul: effekt kalit so‘zlari jadvali

3D dasturlari yoki shader tilini o‘rganishingiz shart emas. Ammo bir nechta “effekt kalit so‘zi”ni bilish muloqot samaradorligini uch baravar oshiradi:

• Siz xohlagan kayfiyat｜Shunday desangiz bo‘ladi

• Metall, akslanuvchi, keskin yaltirash｜“Metall ko‘rinishida qiling, sirti juda silliq bo‘lsin”

• Shisha, shaffof, sinish effekti｜“Shisha shar kabi ko‘rinsin, yorug‘lik undan o‘tganda sinsin”

• Neon chiroqdek yaltirash｜“Neon chiroqqa o‘xshash yaltirash effekti qo‘shing”

• Yulduz changi, uchayotgan zarralar｜“Atrofga yulduzlar orasidagi changga o‘xshash zarralar qo‘shing”

• Yorug‘lik izi｜“Harakat trayektoriyasiga yorug‘lik izi qo‘shing”

• Sirtning oqishi, deformatsiya｜“Sirt suv kabi to‘lqinlansin”

• Tukli, mat｜“Mat, xira tekstura qiling”

• Fon xiralashuvi, maydon chuqurligi｜“Oldingi obyektni ajratib ko‘rsatish uchun fonni biroz xiralashtiring”

• Xira projektor nuri｜“Projektor nurini yuqoridan tushiring, muhitni biroz qorong‘i qiling”

• Kartoon, yassi uslub｜“Kartoon render uslubida qiling”

meshPhysicalMaterial yoki transmission kabi so‘zlarni bilishingiz shart emas. Faqat “shaffof shisha shar” desangiz kifoya, AI buni qanday yaratishni biladi.

4-usul: AI sizga savollar bersin

Agar umuman tasavvuringiz bo‘lmasa, shunchaki ayting:

“Remotion + Three.js yordamida 3D sahna yaratmoqchiman, ammo qaysi parametrlarni tanlashni bilmayman. Avval menga bir nechta savol bering, men variantlardan tanlayman.”

AI sizdan quyidagilarni so‘raydi: nechta obyekt bo‘lsin? Yorug‘lik iliqmi yoki sovuqmi? Tez sur’atdami yoki sokinmi? Material qanday ko‘rinsin? Variant tanlash har doim bo‘sh joyni to‘ldirishdan oson.

IV. 3D animatsiya prompt shablonlari — to‘g‘ridan-to‘g‘ri nusxalang

Quyidagi promptlar amalda sinovdan o‘tgan. Bir necha so‘zni o‘zgartirib, darhol ishlatishingiz mumkin. Har birida qaysi holatga mosligi ko‘rsatilgan.

1-shablon: mahsulot taqdimoti uslubi (eng oddiy)

Remotion + Three.js yordamida mahsulot taqdimoti animatsiyasini yarating.  Kadr markazida [obyekt, masalan: telefon/soat/shar] tursin, materiali [material: metall/shisha/mat], rangi [rang] bo‘lsin. U Y o‘qi atrofida sekin aylansin, tezligi juda yuqori bo‘lmasin, nafis ko‘rinsin. Yuqori chap tomondan nuqtaviy yorug‘lik tushib, yumshoq soya hosil qilsin. Fon bir xil rangda bo‘lsin: [fon rangi]. Butun animatsiya [davomiylik, masalan: 6 soniya] davom etsin.

Mos keladi: logo taqdimoti, mahsulot ko‘rinishi, brend animatsiyasi.

2-shablon: zarrachalar va koinot uslubi

Remotion + Three.js yordamida zarrachali sahna yarating.  Kadr markazida [obyekt] bo‘lsin, uning atrofida ko‘plab mayda yaltiraydigan zarralar aylansin. Zarralar rangi [rang] bo‘lsin va ular spiral trayektoriya bo‘ylab markazdagi obyektga sekin yaqinlashsin. Fon qorong‘i kosmos kabi ko‘rinsin. Biroz glow effekti qo‘shing. Davomiyligi [davomiylik, masalan: 8 soniya] bo‘lsin.

Mos keladi: texnologik intro, ma’lumotlar vizualizatsiyasi, taqdimot foni.

3-shablon: yorug‘lik va material uslubi

Remotion + Three.js yordamida yorug‘lik va material namoyishini yarating.  [Geometrik shakl: shar/kub/halqa] [material]dan tayyorlansin va unda [material effekti: shaffof sinish/metall akslanishi/neon yaltirashi] bo‘lsin. Yorug‘lik nuri uning sirti bo‘ylab chapdan o‘ngga siljisin, nur [rangi] obyekt sirtida [effekt] hosil qilsin. Kamera material tafsilotlarini ko‘rsatish uchun obyekt atrofida sekin aylansin. Davomiyligi [davomiylik] bo‘lsin.

Mos keladi: material tadqiqoti, dizayn ilhomi, konsept namoyishi.

4-shablon: matnni 3D ko‘rinishga keltirish

Bir parcha matnni 3D effektga aylantiring.  Matn [kerakli matn] bo‘lsin, 3D shrift bilan render qilinsin va qalinligi aniq ko‘rinsin. Matn tomoshabin tomon suzib chiqqandek bo‘lsin, unga biroz [effekt: yaltirash/metall/shisha] qo‘shilsin. Fon [bir xil rang/gradient/yulduzli osmon] bo‘lsin. Davomiyligi [davomiylik].

Mos keladi: sarlavha animatsiyasi, poster, ijtimoiy tarmoq kartalari.

5-shablon: abstrakt geometrik san’at

Abstrakt geometrik animatsiya yarating.  Bir nechta [geometrik shakl turi] fazoda tasodifiy joylashsin, har birining o‘lchami va burilish burchagi turlicha bo‘lsin. Ularning materiali [yagona material uslubi], ranglar sxemasi esa [rang1] + [rang2] + [rang3] bo‘lsin. Barcha obyektlar sekin [harakat turi: suzish/aylanish/pulsatsiya] qilsin, xuddi dinamik haykal kabi. Yumshoq yorug‘lik va yengil maydon chuqurligi effektini qo‘shing. Davomiyligi [davomiylik] bo‘lsin.

Mos keladi: badiiy ijod, fon rasmi, konsept video.

Yana quyidagi “qo‘shimchalar”ni ham ishlatishingiz mumkin

Effektni aniq boshqarish uchun istalgan shablon oxiriga quyidagi iboralarni qo‘shing:

• Bu jumlani qo‘shing｜Natija

• “Yengil Bloom post-processing qatlamini qo‘shing”｜Yaltiraydigan obyekt atrofida yanada xayoliy nur tarqaladi

• “Kamera obyekt atrofida sekin aylansin”｜Kadr harakati paydo bo‘ladi va tasvir turg‘un rakursdan ko‘ra kinematografikroq ko‘rinadi

• “Fon bir xil rang emas, gradient bo‘lsin”｜Bir xillikning oldini oladi

• “Maydon chuqurligi effektini qo‘shing, fon biroz xiralashsin”｜Asosiy obyekt yanada ajralib turadi

• “Animatsiya boshida ease-in, oxirida ease-out qo‘shing”｜Ritm tabiiyroq bo‘ladi, keskinlik kamayadi

• “3-soniyadan 5-soniyagacha obyekt kattalashib, keyin kichraysin”｜Animatsiyaga “nafas olish” ritmini qo‘shadi

V. Promptdan skrinshotgacha — to‘liq ish jarayoni

Endi siz prompt yozdingiz yoki yuqoridagi shablonlardan birini tanladingiz. Keyin nima qilish kerak?

1-qadam: promptni Claude Code’ga yuboring

Remotion loyihangiz joylashgan papkani oching va promptni Claude Code’ga joylashtiring. Remotion Skill o‘rnatilgan bo‘lsa, Claude avtomatik ravishda “animatsiya rejimi”ga o‘tadi.

2-qadam: ko‘rib chiqing

AI kodni yaratgach, quyidagini ishga tushiring:

npx remotion studio

Brauzerda real vaqt rejimidagi ko‘rish oynasi paydo bo‘ladi. Vaqt shkalasini sudrab, har bir kadrdagi natijani ko‘rishingiz mumkin.

3-qadam: takroriy sozlash

Ko‘rish oynasiga qarab, AI’ga nimadan norozi ekaningizni ayting:

“Fon juda qorong‘i, biroz yorqinroq qiling.” “Zarralar juda ko‘p, yarmini qoldiring.” “Aylanish tezligi juda yuqori, 30% sekinlashtiring.”

Har safar o‘zgartirganda Studio avtomatik yangilanadi. Qoniqarguningizcha qayta-qayta sozlang.

4-qadam: skrinshot olish

Sozlamalar tayyor bo‘lgach, skrinshot oling:

A usul — bitta kadrni suratga olish (tavsiya etiladi, eng tezkor):

npx remotion still <komponent_nomi> chiqish_fayli_nomi.png --frame=kadr_raqami

Masalan, 3-soniyadagi kadrni (60 fps da bu 180-kadr) olishni xohlasangiz:

npx remotion still My3DScene screenshot.png --frame=180

Bir necha soniyadan so‘ng 1080p skrinshot tayyor bo‘ladi. Boshqa kadr raqamini ko‘rsatib, yana suratga oling — bunday “bitta kadrli skrinshot” butun videoni render qilishdan ancha tez.

B usul — butun videoni eksport qilib, keyin kadr olish:

npx remotion render My3DScene out.mp4

Render tugagach, istalgan pleyerda videoni to‘xtatib, skrinshot oling. Sekinroq, ammo to‘liq — ketma-ket bir nechta skrinshot kerak bo‘lgan holatlar uchun mos.

C usul — skrinshotni bevosita Studio orqali olish:

Studio’ning oldindan ko‘rish oynasida kerakli kadrga o‘ting, o‘ng tugmani bosing → skrinshotni saqlang. Eng intuitiv usul, buyruq satri kerak emas.

5-qadam: rasmiy akkaunt / ijtimoiy tarmoqlar uchun

Olingan rasmlar standart PNG formatida, 1080p aniqlikda bo‘ladi. Ularni bevosita rasmiy akkaunt muharririga sudrab kiriting yoki do‘stlar davrasiga joylang.

Bir nechta rasm kerak bo‘lsa, promptdagi parametrlarni (rang/material/burchak) o‘zgartirib, 1–4-qadamlarni takrorlang. Beshta variantni o‘n daqiqada tayyorlash mumkin.

6. Ochig‘ini aytganda: bu yechim nimalarga qodir emas

Yuqorida uning nimalarga qodirligi haqida gaplashdik. Endi u nimalarga qodir emasligini, shuningdek qachon bu yechimdan voz kechib, boshqa vositaga o‘tish kerakligini ko‘rib chiqamiz.

WebGL’ning tub cheklovlari

WebGL brauzerda ishlaydi. Brauzer professional 3D rendereri emas, uning asosida GPU quvurlarini taqlid qiluvchi veb-dvigatel yotadi. Bu quyidagilarni anglatadi:

Tasvir sifati chegaralangan. Blender’dagi Cycles nurlarni kuzatish tizimi va Octane spektral renderi — WebGL bularning hech birini bajara olmaydi. Haqiqiy global yoritish va nurlarni kuzatish mavjud emas, materiallar soddalashtirilgan. Tasvir “toza”, ammo “sun’iy” ko‘rinadi; unda haqiqiy rendererlarga xos nozik bilvosita yoritish va material tafsilotlari yetishmaydi.

Sahna murakkabligi cheklangan. Bir necha o‘n mingta uchburchak hali ravon ishlaydi, ammo milliondan oshgach kadrlar tushib keta boshlaydi. Zarralar soni 10 000 dan oshsa, tizim sekinlashadi. Professional 3D dasturlarida esa bitta qahramon modeli uchun bir necha million poligon odatiy hol.

Fizik simulyatsiya mavjud emas. Mato harakati, suyuqlik sachrashi, qattiq jismlar to‘qnashuvi — Blender’da ikki marta bosish bilan bajariladigan ishlar WebGL’da noldan qurilishi kerak, natija esa baribir soddalashtirilgan bo‘ladi.

Render sekin. 30 soniyalik murakkab 3D sahnani render qilish bir necha soat davom etishi mumkin. Xuddi shu sahna Blender’da GPU yordamida bir necha daqiqada tayyor bo‘lishi mumkin.

WebGPU hali rivojlanish bosqichida

WebGPU keyingi avlod standarti bo‘lib, WebGL’dan tezroq. Ammo brauzerlar uni faqat 2025-yil o‘rtalaridan boshlab dastlabki darajada qo‘llay boshladi — Firefox va Safari hali yetib olmoqda, Three.js’ning WebGPU qo‘llovi esa hanuz tajribaviy, API hali o‘zgarishi mumkin. Hozir undan amaliy loyihada foydalanish tavakkal.

AI yozgan kodda ham muammolar bor

Bir jumlani 3D animatsiyaga aylantirish chindan ham hayratlanarli, ammo AI yaratgan kod “to‘g‘ri ko‘rinib, xato ishlashi” tez-tez uchraydi:

• Oddiy sahna (bitta obyekt, bitta yorug‘lik manbai, aylanish animatsiyasi): 80% holatda birinchi urinishdayoq ishlaydi

• O‘rtacha murakkablik (bir nechta obyekt, material va zarralar tizimi): xatolarni tuzatish uchun 2–3 tur kerak

• Murakkab sahna (maxsus shaderlar, post-processing quvuri): AI yaratgan kod katta ehtimol bilan ishlamaydi

Qachon boshqa vositaga o‘tish kerak?

• Ehtiyojingiz｜Tavsiya etiladigan vosita

• Logo / mahsulot / ma’lumotlar vizualizatsiyasi animatsiyasi｜Remotion + Three.js ✅

• Konseptual rasm, ijtimoiy tarmoq tasviri｜Remotion + Three.js ✅

• Qahramonlar va sahnalarga ega qisqa film｜Blender

• Fotorealistik ko‘rinish｜Unreal Engine / Blender Cycles

• Render tezligi qat’iy talab bo‘lsa｜Blender GPU renderi

Qisqacha: Remotion + Three.js — “chiroyli tasvirlarni tez tayyorlash vositasi”, “kinematografik darajadagi render dvigateli” emas. Undan skrinshot, konsept va vizual izlanishlar uchun foydalaning — u juda tez va yengil. Ammo u orqali “Dyunа” filmidagi VFX’ni yaratishni kutmang.

7. Eng yaxshi materiallar bir joyda

Remotion haqida

• Resurs｜Tavsif

• Rasmiy hujjatlar｜Juda yaxshi yozilgan, avval shu yerdan boshlang

• remotion-template-three｜Rasmiy 3D boshlang‘ich shabloni, darhol ishlatish mumkin

• Remotion Workshop｜Asoschi shaxsan olib boradigan 52 daqiqalik bepul qo‘llanma

• Make Video With Code｜1,5 soatlik bepul amaliy mashg‘ulot

• ByteGrad: Remotion + Claude Code｜AI yordamida Remotion yozish bo‘yicha amaliy namoyish

• Claude-Code-Video-Toolkit｜To‘liq vositalar to‘plami — komponentlar + o‘tishlar + mavzu tizimi

• remotion-best-practices 3D qo‘llanmasi｜3D’dagi muammolar va xatolardan qochish bo‘yicha to‘liq qo‘llanma

Three.js / WebGL

• Resurs｜Tavsif

• Three.js rasmiy hujjatlari｜300 dan ortiq ishlaydigan namuna

• WebGL2 & GLSL Primer｜GLSL’ni noldan mukammal o‘rganish va tamoyillarni tizimli egallash

• Three.js Bootcamp｜20 soatlik kurs, 3D o‘yin loyihasi bilan (2026.6 yangilangan)

• Three.js Journey｜Bruno Simon’ning klassik kursi

• WebGL+Three.js’ga kirish va amaliyot｜18 bobdan iborat tizimli xitoy tilidagi kurs

Ochiq kodli loyihalar — bevosita o‘rganing

• Loyiha｜Tavsiya sababi

• aimees-papercraft-world.com｜Manba kodi va Blender modellari to‘liq ochiq, o‘rganish uchun eng yaxshi material

• card-3d-animation｜Remotion + 3D’ning minimal namunasi, ilk amaliyot uchun mos

• iMoss｜500 000 ta maysa bargi + maxsus shader, ta’sirchan natija

• siri-glsl｜Apple dizayn tilini faqat shaderlar orqali qayta yaratish

Ilhom manbalari — imkoniyatlar chegarasini ko‘ring

• Ish｜Kalit so‘z

• bruno-simon.com｜Three.js interaktiv ishlarining sanoatdagi etaloni

• samsy.ninja｜WebGPU kiberpanki

• jordan-breton.com｜3D suzuvchi orollar, FWA Site of the Day

• bilal.show｜Sahifani aylantirish orqali boshqariladigan 3D hikoya

Xulosa

Hozirgina o‘qib chiqqan maqolangizni bir jumlada jamlasak:

Ilgari 3D animatsiya yaratish uchun Blender, render va dasturlashni o‘rganish kerak edi. Endi sizga faqat Node.js, bitta prompt va bitta namunaviy rasm kerak.

Avval o‘zingizga yoqadigan 3D namunaviy rasmni toping, shablondan bitta prompt tanlab, uni biroz o‘zgartiring va Claude Code’ga yuboring. Studio’da natijani ko‘rib, skrinshotni saqlang. O‘n daqiqadan so‘ng o‘zingiz “aytib bergan” 3D tasvirga ega bo‘lasiz.