Unaweza kutengeneza uhuishaji wa 3D bila kujua kuandika msimbo? Remotion Skill + Three.js

Je, unaweza kutengeneza uhuishaji wa 3D bila kujua kuandika msimbo? Mwongozo kamili wa Remotion Skill + Three.js

Hapo awali, ulihitaji nini ili kutengeneza uhuishaji wa 3D?

Kwanza ulipaswa kujifunza Blender au Maya—uundaji wa modeli, uwekaji wa texture, mwangaza, kuunganisha mifupa, kurekebisha mikondo ya uhuishaji, kuweka vigezo vya uonyeshaji—ilichukua miezi kadhaa. Njia ya kutumia msimbo ilikuwa ngumu zaidi: pipeline ya WebGL, shaders za GLSL, mabadiliko ya matriksi, na API nyingi za Three.js—kutengeneza mchemraba unaozunguka kulihitaji mistari mia mbili ya msimbo.

Na sasa?

Sakinisha zana, andika prompt moja, kisha AI itakusaidia kuunda mandhari yenye kina. Ione moja kwa moja kwenye Studio, rekebisha hadi uridhike, piga picha ya skrini, ihamishe na ushiriki kwenye mitandao ya kijamii.

Makala hii inakuonyesha mchakato mzima—bila kuhitaji uandike hata mstari mmoja wa msimbo.

I. Vitu vitatu vinavyounda "uchawi" huu

Remotion Skill: Wewe unaeleza, yenyewe inaandika msimbo

Remotion ni mfumo huria wa kutengeneza video kwa React (una zaidi ya nyota 45K kwenye GitHub). Lakini kwako, muhimu zaidi ni Agent Skill yake—kijalizi cha AI kilichozinduliwa Januari 2026, na kusakinishwa zaidi ya 25K katika wiki ya kwanza.

Baada ya kukisakinisha, unaeleza kwa lugha ya kawaida aina ya uhuishaji unaotaka ndani ya Claude Code, na AI huandika msimbo moja kwa moja. Upande wa kushoto kuna dirisha la mwonekano wa moja kwa moja, hivyo unaweza kuona matokeo na kufanya marekebisho wakati wowote.

Three.js / WebGL: Injini ya 3D ndani ya kivinjari

Three.js huficha ugumu wa WebGL. Huhitaji kujua buffer ya vertex ni nini au compilation ya shader inamaanisha nini—you need only kusema "nataka mpira wa chuma uzunguke chini ya mwanga wa spotlight", na Three.js itauchora kwenye skrini.

@remotion/three: Kuingiza 3D kwenye video

Timu ya Remotion imetengeneza kifurushi maalumu cha kuunganisha. Kinawezesha mandhari za 3D za Three.js kusawazishwa na timeline ya video ya Remotion—kile kinachoonyeshwa katika kila fremu ndicho kinachohamishwa kuwa MP4.

Vitu hivi vitatu vikijumuishwa, matokeo yake ni: unamwambia AI sentensi moja, nayo inakusaidia kuunda video ya uhuishaji wa 3D.

II. Unahitaji kuandaa nini? Dakika tano zinatosha

Unachohitaji ni rahisi sana:

1. Sakinisha Node.js

Nenda nodejs.org kuipakua, kisha bofya "Next" hadi mwisho. Hii ndiyo mazingira ya msingi ya kuendesha Remotion.

2. Unda mradi wa Remotion

Fungua terminal (kwenye Windows huitwa "Command Prompt" au PowerShell), kisha ingiza:

npx create-video@latest

Itakuuliza jina la mradi, kisha uchague templeti chaguomsingi. Dakika moja inatosha.

3. Sakinisha Remotion Skill na usaidizi wa 3D

npx skills add remotion-dev/skills 

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

Amri mbili tu: nakili, bandika na ubonyeze Enter. Baadaye, unaposema chochote kinachohusiana na Remotion ndani ya Claude Code, AI itawasha kiotomatiki hali ya "msaidizi wa uhuishaji wa 3D".

4. Anzisha mwonekano wa awali

npx remotion studio

Dirisha la kivinjari litafunguka kiotomatiki. Kuanzia hapo, kila mandhari ya 3D utakayounda itaonekana moja kwa moja kwenye dirisha hili.

III. Tatizo halisi: Unawezaje "kueleza" picha iliyo akilini mwako?

Kuandaa mazingira kulichukua dakika tano tu. Changamoto halisi iko hapa: unapomwambia AI "nataka uhuishaji mzuri wa 3D", kuna pengo kubwa kati ya inavyoelewa na picha iliyo akilini mwako.

Maandishi kwa asili si chombo cha 3D. Tatizo si lako.

Njia hizi nne zitakusaidia kuvuka pengo hilo. Hazihitaji maarifa yoyote ya kiufundi—kinachohitajika ni ustadi wa mawasiliano.

Njia ya kwanza: Tumia picha ya rejea (yenye ufanisi zaidi)

Tafuta picha inayokaribiana na matokeo unayotaka—mchoro wa dhana, picha ya filamu au picha ya skrini ya kazi ya mtu mwingine, zote zinafaa. Buruta picha hiyo moja kwa moja kwenye kisanduku cha mazungumzo cha Claude Code:

"Tumia Remotion + Three.js kuunda hali kama hii. Badilisha rangi ya dhahabu iwe samawati, na ufanye uso wa tufe uwe laini zaidi."

Picha moja inaweza kuwasilisha mara moja taarifa kama: kiwango cha mwonekano wa metali, msongamano wa chembe, ukali wa mwanga, mwelekeo wa rangi na kitovu cha mpangilio. Hata ukiandika mamia ya maneno, huenda usieleze mambo haya kwa uwazi.

Njia ya pili: Boresha kwa awamu, usiseme kila kitu mara moja

Kosa ambalo wanaoanza hufanya mara nyingi: kuweka mahitaji yote kwenye prompt moja. Kwa kawaida matokeo yake huwa ni kuvurugika kabisa.

Njia sahihi ni kurekebisha kipengele kimoja tu kwa kila awamu:

Sentensi ya kwanza: "Tengeneza tufe, lizunguke polepole kwenye mhimili wa Y."  (Umeona tufe likizunguka kwenye Studio → endelea.)  Sentensi ya pili: "Badilisha tufe liwe la kioo na liwe na uwazi. Ongeza chanzo cha mwanga kutoka kona ya juu kushoto."  (Tufe la kioo limetokea → endelea.)  Sentensi ya tatu: "Ongeza duara la chembe ndogo kuzunguka tufe, kama pete ya nyota. Zing'ae."  Sentensi ya nne: "Katika sekunde mbili za kwanza chembe zitokee polepole, katika sekunde moja ya kati ziongeze kasi ghafla, kisha zitawanyike mwishoni."

Mazungumzo manne kwa jumla yalichukua dakika kumi. Kila hatua ilionyesha matokeo mara moja, na ukikosea ulijua mara moja tatizo lilitokea wapi. Ni haraka zaidi kuliko kukaza kichwa kuandika maelezo kamili kisha kutumia nusu siku kurekebisha hitilafu.

Njia ya tatu: Orodha ya haraka ya maneno ya athari

Huhitaji kujifunza programu za 3D au lugha ya shader. Lakini kujua maneno machache ya "athari" kunaweza kuongeza ufanisi wa mawasiliano mara tatu:

• Hisia unayotaka｜Sema hivi

• Ya metali, yenye mwanga unaoakisiwa, mwangaza mkali｜"Ipe mwonekano wa metali, uso uwe laini sana"

• Ya kioo, yenye uwazi, yenye mnyumbuliko wa mwanga｜"Ipe mwonekano wa tufe la kioo; mwanga unapopita upindike"

• Iangaze kama taa ya neon｜"Ongeza athari ya mwanga, kama taa ya neon"

• Vumbi la nyota, chembe zinazoruka｜"Ongeza chembe kuzunguka, kama vumbi angani lenye nyota"

• Mkia wa mwanga｜"Ongeza athari ya mkia wa mwanga kwenye njia ya mwendo"

• Uso unayoyoma, unabadilika｜"Uso uwe na mawimbi, kama maji"

• Wenye manyoya, matte｜"Ipe mwonekano wa matte uliosuguliwa"

• Mandharinyuma yenye ukungu, kina cha mwonekano｜"Fanya mandharinyuma iwe na ukungu kidogo ili kuangazia kitu kilicho mbele"

• Spotlight yenye hali ya giza｜"Tumia spotlight kutoka juu, mazingira yawe na giza zaidi"

• Mtindo wa katuni ulio bapa｜"Ipe mwonekano wa uonyeshaji wa katuni"

Huhitaji kusema maneno kama meshPhysicalMaterial au transmission—sema tu "tufe la kioo lenye uwazi", na AI itajua la kufanya.

Njia ya nne: Ruhusu AI ikuulize maswali

Kama huna wazo kabisa, sema moja kwa moja:

"Nataka kutengeneza mandhari ya 3D kwa Remotion + Three.js, lakini sina uhakika kuhusu vigezo. Kwanza niulize maswali machache, nami nitachagua majibu."

AI itakuuliza: vitu vingapi? Chanzo cha mwanga kiwe cha joto au baridi? Kasi iwe ya haraka au polepole? Hisia ya nyenzo iwe ipi? Kuchagua majibu ni rahisi zaidi kuliko kujaza nafasi wazi.

IV. Violezo vya prompt za uhuishaji wa 3D—nakili moja kwa moja

Prompt zifuatazo zimejaribiwa kwa vitendo; zinakili na kubadilisha maneno machache tu. Kila moja imeelezwa aina ya matumizi inayofaa.

Templeti ya kwanza: Mtindo wa kuonyesha bidhaa (rahisi zaidi)

Tumia Remotion + Three.js kutengeneza uhuishaji wa kuonyesha bidhaa.  [Kitu, kama vile simu/saa/tufe] kiwekwe katikati kabisa ya fremu, nyenzo yake iwe [nyenzo: metali/kioo/matte], rangi iwe [rangi]. Kizunguke polepole kwenye mhimili wa Y; kasi isiwe kubwa, kiwe na mwonekano wa kifahari. Chanzo cha mwanga cha nukta kitoke juu kushoto na kuunda kivuli laini. Mandharinyuma yawe na rangi moja, yawe [rangi ya mandharinyuma]. Uhuishaji mzima udumu [muda, kama vile sekunde 6].

Inafaa kwa: Maonyesho ya Logo, mwonekano wa bidhaa, uhuishaji wa chapa.

Templeti ya pili: Mtindo wa ulimwengu wa chembe

Tumia Remotion + Three.js kutengeneza mandhari ya chembe.  Katikati ya fremu kuwe na [kitu], huku chembe nyingi ndogo zinazong'aa zikikizunguka. Rangi ya chembe iwe [rangi], zikikaribia kitu cha katikati polepole zikifuata njia ya mzunguko wa helikali. Mandharinyuma yawe na hisia ya anga la giza. Ongeza athari kidogo ya mwanga unaong'aa. Udumu [muda, kama vile sekunde 8].

Inafaa kwa: Utangulizi wa kiteknolojia, taswira ya data, mandharinyuma ya hafla ya uzinduzi.

Templeti ya tatu: Mtindo wa mwanga na nyenzo

Tumia Remotion + Three.js kutengeneza onyesho la mwanga na nyenzo.  [Jiometri: tufe/mchemraba/pete] itengenezwe kwa [nyenzo], ikiwa na [athari ya nyenzo: mnyumbuliko wa uwazi/mwanga wa metali/mwanga wa neon]. Mwale wa mwanga ufagie uso wake kutoka kushoto kwenda kulia. [Rangi] ya mwanga itengeneze [athari] kwenye uso wa kitu. Kamera izunguke kitu polepole ili kuonyesha maelezo ya nyenzo. Udumu [muda].

Inafaa kwa: Utafiti wa nyenzo, msukumo wa ubunifu, uwasilishaji wa dhana.

Templeti ya nne: Kugeuza maandishi kuwa 3D

Geuza maandishi kuwa athari ya 3D.  Maandishi yawe [maandishi unayotaka], yasionyeshwe kwa fonti ya 3D yenye unene unaoonekana. Yaelekee kwa mtazamaji na kujitokeza, yakiwa na kidogo cha [athari: mwanga/metali/kioo]. Mandharinyuma yawe [rangi moja/mchanganyiko wa rangi/anga lenye nyota]. Udumu [muda].

Inafaa kwa: Uhuishaji wa vichwa, mabango, kadi za mitandao ya kijamii.

Templeti ya tano: Sanaa ya jiometri dhahania

Tengeneza uhuishaji wa jiometri dhahania.  Aina kadhaa za [aina ya jiometri] zisambazwe bila mpangilio angani, kila moja ikiwa na ukubwa na pembe tofauti ya mzunguko. Nyenzo zake ziwe [mtindo mmoja wa nyenzo], na mpangilio wa rangi uwe [rangi1] + [rangi2] + [rangi3]. Vitu vyote viwe [namna ya mwendo: vinaelea/vinazunguka/vinapiga msukumo] polepole, kama sanamu inayosogea. Ongeza mwanga laini na athari kidogo ya kina cha mwonekano. Udumu [muda].

Inafaa kwa: Uundaji wa sanaa, mandharinyuma, video za dhana.

Unaweza pia kuongeza "viungo" hivi

Ongeza vifungu hivi vifupi baada ya templeti yoyote ili kudhibiti athari kwa usahihi:

• Ongeza sentensi hii｜Athari

• "Ongeza safu nyepesi ya uchakataji wa baada ya Bloom"｜Vitu vinavyong'aa vitakuwa na mwanga unaotawanyika, hivyo kuleta hisia ya ndoto zaidi

• "Kamera izunguke kitu polepole"｜Mwendo wa kamera huleta hisia ya sinema zaidi kuliko mtazamo usiobadilika

• "Tumia mchanganyiko wa rangi kwenye mandharinyuma badala ya rangi moja"｜Epuka ukiritimba

• "Ongeza athari ya kina cha mwonekano, mandharinyuma iwe na ukungu kidogo"｜Kitu kikuu kitaonekana zaidi

• "Ongeza ease-in mwanzoni mwa uhuishaji na ease-out mwishoni"｜Mdundo huwa wa asili zaidi na usiokatika ghafla

• "Kati ya sekunde ya 3 na ya 5 kitu kikue kisha kipungue"｜Ongeza mdundo wa "kupumua" kwenye uhuishaji

V. Kutoka kwenye prompt hadi picha ya skrini—mchakato kamili

Sawa, sasa umeandika prompt moja (au umechagua mojawapo ya templeti hapo juu). Unafanyaje baada ya hapo?

Hatua ya 1: Tuma prompt kwa Claude Code

Fungua saraka ya mradi wako wa Remotion, kisha bandika prompt ndani ya Claude Code. Ikiwa umesakinisha Remotion Skill, Claude itabadilika kiotomatiki hadi "hali ya uhuishaji".

Hatua ya 2: Mwonekano wa awali

Baada ya AI kutengeneza msimbo, endesha:

npx remotion studio

Mwonekano wa awali wa moja kwa moja utaonekana kwenye kivinjari. Buruta timeline ili kuona athari ya kila fremu.

Hatua ya 3: Boresha

Unapotazama mwonekano wa awali, iambie AI usichokipenda:

"Mandharinyuma ni meusi sana, yaangazie kidogo." "Kuna chembe nyingi sana, zipunguze hadi nusu." "Kasi ya mzunguko ni kubwa sana, ipunguze kwa 30%."

Kila unapobadilisha, Studio huonyesha upya kiotomatiki. Endelea kurekebisha hadi uridhike.

Hatua ya 4: Piga picha ya skrini

Ukimaliza kurekebisha, piga picha ya skrini:

Njia A - Piga picha ya skrini ya fremu moja (inapendekezwa, ni ya haraka zaidi):

npx remotion still <Jina_la_komponenti> jina_la_faili_la_matokeo.png --frame=nambari_ya_fremu

Kwa mfano, ikiwa unataka kupiga picha ya sekunde ya 3 (ambayo ni fremu ya 180 kwa 60fps):

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

Subiri sekunde chache, na picha ya skrini ya 1080p itakuwa tayari. Badilisha nambari ya fremu na upige nyingine - aina hii ya "picha ya skrini ya fremu moja" ni ya haraka zaidi kuliko kuonyesha video nzima.

Njia B - Hamisha video nzima, kisha piga picha ya fremu:

npx remotion render My3DScene out.mp4

Baada ya uonyeshaji kukamilika, sitisha video katika kicheza video chochote na upige picha ya skrini. Ni polepole lakini kamili - inafaa unapohitaji picha kadhaa za skrini mfululizo.

Njia C - Tumia Studio moja kwa moja kupiga picha ya skrini:

Katika dirisha la onyesho la Studio, buruta hadi fremu unayotaka, bofya kulia → hifadhi picha ya skrini. Ni njia iliyo wazi zaidi na haihitaji amri za mstari wa amri.

Hatua ya 5: Tumia kwa akaunti rasmi za WeChat / mitandao ya kijamii

Picha ya skrini iliyopigwa iko katika umbizo la kawaida la PNG, yenye mwonekano wa 1080p. Iburute moja kwa moja kwenye kihariri cha akaunti rasmi ya WeChat au ichapishe kwenye Moments.

Ukihitaji picha kadhaa, badilisha vigezo katika maelekezo (rangi/nyenzo/pembe), kisha rudia Hatua ya 1-4. Tofauti tano zinakamilika ndani ya dakika kumi.

6. Kwa uaminifu: Mambo ambayo suluhisho hili haliwezi kufanya

Hapo awali tulieleza linaweza kufanya nini. Sasa tuzungumzie haliwezi kufanya nini - na ni wakati gani unapaswa kuachana na suluhisho hili na kutumia zana nyingine.

Vizuizi vya kimsingi vya WebGL

WebGL huendeshwa kwenye kivinjari. Kivinjari si kifaa maalumu cha kuonyesha 3D; msingi wake ni injini ya tovuti inayoiga mchakato wa GPU. Hii inamaanisha:

Ubora wa picha una kikomo. Ufuatiliaji wa miale wa Cycles wa Blender na uonyeshaji wa wigo wa Octane - WebGL haiwezi kufanya lolote kati ya hayo. Hakuna mwangaza halisi wa kimataifa, hakuna ufuatiliaji wa miale, na nyenzo ni toleo lililorahisishwa. Picha huwa "safi" lakini pia "bandia", bila mwangaza hafifu wa moja kwa moja na maelezo ya nyenzo yanayoonekana katika vionyeshi halisi.

Utata wa mandhari una kikomo. Maelfu kadhaa ya pembetatu bado huendeshwa kwa ulaini, lakini ukifikisha milioni, fremu huanza kupungua. Chembe zikizidi elfu kumi, mfumo huanza kulegea. Katika programu za kitaalamu za 3D, modeli ya mhusika yenye nyuso milioni kadhaa ni jambo la kawaida.

Hakuna uigaji wa fizikia. Kitambaa kinachopepea, kimiminika kinachomwagika, migongano ya miili migumu - mambo yanayohitaji mibofyo michache tu katika Blender yanakulazimisha kujenga kila kitu kutoka mwanzo katika WebGL, na matokeo yake bado huwa toleo lililorahisishwa.

Uonyeshaji ni wa polepole. Mandhari changamano ya 3D yenye urefu wa sekunde 30 inaweza kuhitaji saa kadhaa kuonyeshwa. Mandhari kama hiyo katika Blender inaweza kuchukua dakika chache kwa kutumia GPU.

WebGPU bado iko njiani

WebGPU ni kiwango cha kizazi kijacho na ni haraka kuliko WebGL. Lakini vivinjari vilianza kukiunga mkono awali katikati ya 2025 - Firefox na Safari bado vinafuatilia, na uungaji mkono wa Three.js kwa WebGPU bado ni wa majaribio; API inaweza bado kubadilika. Kuitumia katika mradi halisi sasa ni kamari.

Msimbo ulioandikwa na AI pia una mitego

Kubadilisha sentensi moja kuwa uhuishaji wa 3D ni jambo la kushangaza, lakini si kawaida kwa msimbo unaozalishwa na AI "kuonekana sahihi lakini kukosea unapotekelezwa":

• Mandhari rahisi (kitu kimoja, chanzo kimoja cha mwanga, uhuishaji wa mzunguko): 80% huendesha vizuri mara ya kwanza

• Utata wa wastani (vitu vingi, nyenzo nyingi, mfumo wa chembe): huhitaji raundi 2-3 za kurekebisha hitilafu

• Mandhari changamano (vivuli maalumu, mchakato wa baada ya uonyeshaji): msimbo unaozalishwa na AI una uwezekano mkubwa wa kutotumika

Ni wakati gani ubadilishe zana?

• Mahitaji yako | Zana inayopaswa kutumiwa

• Kuunda nembo / bidhaa / uhuishaji wa taswira ya data | Remotion + Three.js ✅

• Kuunda picha za dhana na picha za mitandao ya kijamii | Remotion + Three.js ✅

• Kuunda filamu fupi yenye wahusika na mandhari | Blender

• Kutafuta uhalisia wa kiwango cha picha | Unreal Engine / Blender Cycles

• Kasi ya uonyeshaji ikiwa ni hitaji lisilobadilika | Uonyeshaji wa GPU wa Blender

Kwa ufupi: Remotion + Three.js ni "zana ya kutengeneza picha nzuri kwa haraka", si "injini ya uonyeshaji ya kiwango cha filamu". Itumie kupiga picha za skrini, kuunda dhana na kuchunguza mwonekano wa picha - ni ya haraka sana na nyepesi. Lakini usitarajie kuitumia kutengeneza VFX za Dune.

7. Nyenzo bora zote kwa pamoja

Remotion

• Nyenzo | Maelezo

• Nyaraka rasmi | Zimeandikwa vizuri sana; anza hapa

• remotion-template-three | Kiolezo rasmi cha kuanzia 3D, tayari kutumika

• Remotion Workshop | Mafunzo ya bila malipo ya dakika 52 yanayoongozwa na mwanzilishi mwenyewe

• Make Video With Code | Mafunzo ya vitendo ya bila malipo ya saa 1.5

• ByteGrad: Remotion + Claude Code | Onyesho la vitendo la kutumia AI kuandika Remotion

• Claude-Code-Video-Toolkit | Zana kamili - komponenti + mabadiliko + mfumo wa mandhari

• remotion-best-practices 3D | Mwongozo kamili wa kuepuka mitego ya 3D

Three.js / WebGL

• Nyenzo | Maelezo

• Nyaraka rasmi za Three.js | Zaidi ya mifano 300 inayoweza kuendeshwa

• WebGL2 & GLSL Primer | Kutoka sifuri hadi umahiri wa GLSL, jifunze kanuni kwa mfumo

• Three.js Bootcamp | Kozi ya saa 20, ikijumuisha mradi wa mchezo wa 3D (imesasishwa 2026.6)

• Three.js Journey | Kozi maarufu ya Bruno Simon

• Utangulizi na mazoezi ya WebGL+Three.js | Kozi ya Kichina yenye sura 18 na mfumo kamili

Miradi huria - jifunze moja kwa moja

• Mradi | Sababu ya kupendekeza

• aimees-papercraft-world.com | Msimbo wa chanzo na modeli za Blender zote ziko huria; nyenzo bora ya kujifunzia

• card-3d-animation | Mfano mdogo wa Remotion + 3D, unaofaa kwa mara ya kwanza

• iMoss | Majani 500,000 + vivuli maalumu, matokeo ya kuvutia

• siri-glsl | Kuunda upya lugha ya usanifu ya Apple kwa kutumia vivuli pekee

Tovuti za msukumo - tazama viwango vya juu

• Kazi | Maneno muhimu

• bruno-simon.com | Kigezo cha sekta kwa kazi shirikishi za Three.js

• samsy.ninja | Cyberpunk ya WebGPU

• jordan-breton.com | Kisiwa kinachoelea cha 3D, FWA Site of the Day

• bilal.show | Masimulizi ya 3D yanayoendeshwa na kusogeza ukurasa

Muhtasari

Kwa sentensi moja, hili ndilo jambo kuu la makala uliyomaliza kusoma:

Zamani, kutengeneza uhuishaji wa 3D kulihitaji kujifunza Blender, uonyeshaji na programu. Sasa unahitaji Node.js moja tu, maelekezo moja na picha moja ya marejeo.

Tafuta kwanza picha ya marejeo ya 3D unayoipenda, chagua maelekezo kutoka kwenye kiolezo na uyarekebishe kidogo, kisha mpe Claude Code. Ukiona matokeo katika Studio, hifadhi picha ya skrini. Baada ya dakika kumi utakuwa na picha ya 3D uliyoieleza kwa maneno yako mwenyewe.