בלעטער הונדערטער פון רעדי-געמאכטע געניטקייטן פֿאַר Claude, Cursor, און מער.
דריי Three.js טראָגט די מערהייט פון 3D וועב עקספּיריענסעס, און איר דאַרפֿן ניט מער צו קאָדן עס
Three.js רענדערט איבער 70% פון אַלע 3D אינהאַלט אויף די עפענען וועב, פון עפּל פּראָדוקט בלעטער צו אינדי בראַוזער שפּילערייַ. ביז 2025, בויען עפּעס דערמיט געמיינט צו לערנען WebGL, שיידערז, און אַ 200-בלאַט דאָקס פּלאַץ. יעצט, AI סקילז אויף Vibe Skills לאָזן ניט-דעוועלאָפּערס שיקן אַ ארבעטן Three.js סצענע אין אַ אָפּרוטעג - קיין מאַטעמאַטיק דיפּלאָם, קיין Stack Overflow קאַנאַל.
די גייד ווייזט איר וועלכע AI סקילז פּראָדוצירן פאַקטיש Three.js רעזולטאַט, וואָס איר קען טאַקע בויען (שפּיל סעטטינגס, פּראָדוקט קוקערס, העלד סצענעס), און ווי צו גיין פון "איך האָב אַ געדאַנק" צו "ס'איז לעבן אויף מיין דאָמען" אָן קיינמאָל רירן אַ THREE.PerspectiveCamera קאַנסטראַקטער מיט די האַנט.
בלעטער הונדערטער פון רעדי-געמאכטע געניטקייטן פֿאַר Claude, Cursor, און מער.
פאַרוואָס Three.js איז געווען אַוועק-לימיט פֿאַר ניט-דעווס
Three.js איז די JavaScript ראַפּער אַרום WebGL, די בראַוזער'ס נידעריק-מדרגה 3D גראַפיקס API. צו נוצן עס דירעקט, איר האָט געמוזט פאַרשטיין:
- סצענע גראַפס (קאַמעראַס, ליכט, מעשאַז, און ווי זיי פאַרגראָבן זיך)
- שיידערס (ווערטעקס און פראַגמענט פּראָגראַמען געשריבן אין GLSL)
- געאָמעטריע מאַטעמאַטיק (מאַטריצעס, קווערטערניאָנס, וועלט פּלאַץ קעגן לאַקאַל פּלאַץ)
- פאָרשטעלונג בודזשעטן (ציען קאַלז, פּאָליגאָן קאַונץ, טעקסטשער זיקערניש)
אַ טיפּיש "העלא קיוב" טוטאָריאַל לויפט 800 שורות פון JavaScript איידער איר זעט אַ ראָוטירנדיקע פאָרעם. פאַקטיש פּראָדוקציע סצענעס פון אגענטורן ווי Active Theory אָדער Resn לויפן 5,000 צו 15,000 שורות מיט קאַסטאַמייזד שיידער פּייפּליינז.
דער טויער האָט געהאַלטן Three.js אין די הענט פון WebGL ספּעציאַליסטן פאַרדינען $120 צו $250 פּער שעה. דיזיינערס, מאַרקעטערס, גרינדערס, און סטודענטן קען באַווונדערן די אַרבעט אָבער קיינמאָל שיקן עס.
דער שיפט אין 2026: AI קאָדינג מכשירים ווי Cursor און Claude קענען יעצט לייענען אַ בריף אין קלאָר ענגליש און רעזולטאַט אַרבעטנדיקע react-three-fiber סצענעס. AI סקילז פּאַקאַדזשעס דאָס וואָרקפלאָוו אין איין-קליק ינסטאָלז - סטרוקטור, ליכטינג, קאַמעראַ קאָנטראָלס, פאָרשטעלונג אָפּטימיזאַציע, אַלע פאַר-באַקיד.
בלעטער הונדערטער פון רעדי-געמאכטע געניטקייטן פֿאַר Claude, Cursor, און מער.
וואָס איר קען בויען מיט Three.js + AI סקילז
איר קען שיקן פינף קאַנקרעטע רעזולטאַט טייפּס אָן שרייבן WebGL מיט די האַנט. יעדער איינער האָט אַ Vibe Skills קאַטעגאָריע וואָס בונטשאַט דאָס וואָרקפלאָוו.
| רעזולטאַט טיפּ | פאַקטיש-וועלט ביישפּיל | בוי צייט (מיט AI סקיל) | בוי צייט (פֿון קראַטש) |
|---|---|---|---|
| שפּיל סעטטינג | בראַוזער רייסינג שפּיל, מיני-פּלאַטפאָרמער, אַנטלויפֿן צימער | 4-12 שעה | 2-6 וואָכן |
| פּראָדוקט קוקער | 360-גראַד סניקער, כעדפאָון קאָנפיגוראַטאָר, וואַך פּנים | 2-6 שעה | 1-3 וואָכן |
| 3D העלד סצענע | אַנימירטע לאַנדינג פּלאַץ באַקגראַונד, זעץ-געטריבן 3D | 3-8 שעה | 1-2 וואָכן |
| אינטעראַקטיווער אינפאָגראַפיק | ראָוטירנדיקע ערד, אויסגעשלאָגענע מאָטאָר דיאַגראַם, דאַטן גלאָבוס | 4-10 שעה | 2-4 וואָכן |
| AR / פּרוביר-אויף וועב מיינונג | ברילן פּריוויו, צימער אָרט, גרויס מאָדעל | 6-15 שעה | 3-6 וואָכן |
די קאַמפּרעשאַן איז אַפּראָקסאַמאַטלי 10x צו 20x. סקילז האַנדלעס דאָס באָילערפּלייט (סצענע אָפּזעצן, ליכט, קאָנטראָלס, רעספּאָנסיווע גרייס) אַזוי איר קאָנצענטרירן אויף די קריאַטיוו ריכטונג.
די צוויי Vibe Skills קאַטעגאָריעס מערסט רעלאַוואַנט דאָ:
- 3D שפּילערייַ - פול פּלייאַבלע 3D שפּילערייַ דורך Three.js (רייסינג, פּאַזל, מיני-פּלאַטפאָרמער, בראַוזער FPS פּראָטאָטיפּס)
- אינטעראַקטיוו 3D - פּראָדוקט קאָנפיגוראַטאָרס, 3D העלדן, זעץ-געטריבן סצענעס, דאַטן וויזואַליזאַציעס
5 AI Three.js סקילז אויף Vibe Skills (קיין WebGL פארלאנגט)
די 3D שפּילערייַ קאַטעגאָריע אויף Vibe Skills האָט סקילז געבויט ספּעציעל פֿאַר ניט-דעוועלאָפּערס וואָס ווילן Three.js רעזולטאַט. יעדער איינער שיפּט מיט react-three-fiber באָילערפּלייט, אַסעט פּייפּליין, און אַ Cursor-גרייט וואָרקפלאָוו טעקע.
| סקיל טיפּ | וואָס עס פּראָדוצירט | בעסטער פֿאַר |
|---|---|---|
| 3D העלד סצענע בויער | זעץ-געטריבן Three.js סצענע ווי אַ Next.js קאָמפּאָנענט | לאַנדינג בלעטער, פּאָרטפאָליאָ זייטלעך, אגענטור הויפּט בלעטער |
| בראַוזער רייסינג שפּיל סטאַרטער | פול רייסינג שפּיל מיט שפּור, פיזיק, קאָנטראָלס | שפּיל פּראָטאָטיפּס, סאָרט אַקטיוואַציעס, האַקאַטאָנס |
| פּראָדוקט קאָנפיגוראַטאָר | 360-גראַד קוקער מיט מאַטעריאַל / קאָליר סוויטש | E-קאָמערסע געשעפטן, פּראָדוקט לאָנטשעס, Kickstarter בלעטער |
| 3D שפּיל סעטטינג פּאַק | פאַר-געבויטע סצענעס (פֿורעסט, דאַנדזשאַן, Sci-Fi, שטאָטיש) | אינדי שפּילערייַ, שולע פּראָיעקטן, דערציילנדיקע עקספּיריענסעס |
| אינטעראַקטיוו 3D לאָגאָ אַנטפּלעקונג | לאָגאָ ווי אַ 3D מאָדעל מיט קאַמעראַ אַנימאַציע | וועב אינטראַדוקציעס, סאָרט פילמען, קאָנפערענץ אָפּענערס |
בלעטער 3D שפּילערייַ סקילז אויף Vibe Skills צו זען לעבן פּריוויוז. יעדער סקיל שיפּט מיט אַ ווידעאָ דעמאָ אַזוי איר זעט דאָס פאַקטיש רעזולטאַט איידער ינסטאָלינג.
דאָס רעזולטאַט אַרבעט אין קיין מאָדערנע פראַמעוואָרק: Next.js, Astro, Vite, פּשוט HTML. קיין סאָרט קלאָז.
בויען דיין ערשטער Three.js סצענע אין אַ אָפּרוטעג
דאָ איז די פּראַקטיש וועג פון נול צו אַ לעבן Three.js סצענע אויף דיין אייגן דאָמען.
שריט 1: אויסקלייבן דעם ריכטיקן סקיל אויף Vibe Skills
אָנהייב ביי /category/3d-games און פילטער דורך רעזולטאַט טיפּ. אויב איר ווילט אַ העלד סצענע, קריגן דעם 3D העלד סצענע בויער. אויב איר ווילט אַ פּלייאַבלע שפּיל, קריגן דעם בראַוזער רייסינג שפּיל סטאַרטער אָדער שפּיל סעטטינג פּאַק.
לייענט דעם לעבן פּריוויו, קוק דעם דעמאָ ווידעאָ, טשעק די פראַמעוואָרק קאָמפּאַטאַביליטי (רובֿ שיפּס react-three-fiber פֿאַר Next.js / Vite). ינסטאָלירן דעם סקיל אין Cursor אָדער Claude Code.
שריט 2: ינסטאָלירן Cursor (אָדער Claude Code)
ביידע מכשירים קען לויפן AI סקילז. Cursor איז בעסער פֿאַר וויזואַל עדיטינג מיט אַ קאָד פּריוויו פּאַנע. Claude Code איז בעסער פֿאַר טערמינאַל-געטריבן אַרבעט און אגענט וואָרקפלאָוז. אויסקלייבן איינער - ינסטאָלירן אין 5 מינוט.
שריט 3: גענערירן די סצענע
עפנט דעם פּראָיעקט אין דיין רעדאַקטאָר, רופט דעם סקיל, באַשרייבט וואָס איר ווילט אין קלאָר ענגליש: "ראָוטירנדיקע קריסטאַל העלד סצענע מיט דאַרק נאַווי באַקגראַונד, האָווערינג עפעקט, פּאַמעלעך אַוטאָ-ראָוטיישאַן." דאָס AI סקיל רעזולטאַט דאָס גאַנצע Three.js קאָד, אַרייַנגערעכנט ליכט, קאַמעראַ, קאָנטראָלס, און רעספּאָנסיווע גרייס.
שריט 4: סוויטש דיין אַסעטס
פּאַט דיין אייגענע 3D מאָדעלס (.glb אָדער .gltf פֿון Sketchfab, Polyhaven, אָדער Blender עקספּאָרטס), טעקסטשערז (Polyhaven פריי CC0), און סאָרט קאָלירן. דאָס סקיל ינקלאודס אַסעט סלאָטס אַזוי איר ניט ריסטראַקטשער די סצענע.
שריט 5: אָפּטימיזירן פֿאַר מאָביל
דאָס סקיל שיפּט מיט מאָביל פאַל-באַקס: נידעריקער פּאָליגאָן קאַונץ, סימפּלער ליכט, קאַפּט פראַמעראַטעס אויף שוואַכע גפּוס. טעסט אויף אַ פאַקטיש טעלעפאָן (Chrome DevTools מאָביל עמיאַלייטער מיסט גפּו פּראָבלעמען). ציל פֿאַר 60 FPS אויף אַ 2-יאָריקער iPhone ווי די באַזע.
שריט 6: דיפּלוי
פּוש צו Vercel אָדער Netlify. Three.js סצענעס זענען סטאַטיש JavaScript - קיין סערווער, קיין גפּו אינסטאַללאַציע, קיין ספּעציעל האָסטינג. לעבן URL אין אונטער 60 סעקונדעס.
בלעטער Three.js סקילז אויף Vibe Skills →
אָפט געשטעלטע פֿראגן
דאַרף איך וויסן WebGL צו נוצן AI Three.js סקילז?
ניין. AI סקילז אויף Vibe Skills ראַפּן WebGL גאָר. איר באַשרייבט די סצענע אין קלאָר ענגליש, דאָס סקיל רעזולטאַט אַרבעטנדיקע react-three-fiber קאָד, און איר סוויטש דיין אייגענע אַסעטס. דאָס דיפּאַסט איר גייט איז עדיטינג קאָליר וואַלועס און מאָדעל טעקע פּאַטס.
וועט די סצענע לויפן גלאַט אויף מאָביל?
יא, ווען דאָס סקיל ינקלאודס מאָביל אָפּטימיזאַציעס. אַלע Vibe Skills 3D סצענע בויערס שיפּס מיט מיטל-דרייד פאַל-באַקס: נידעריק-פּאָלי מעשאַז אויף שוואַכע טעלעפאָנען, קאַפּט פראַמעראַטעס אויף באַקגראַונד טאַבס, און לייזי-לאָדיד טעקסטשערז. ציל איז 60 FPS אויף אַ 2-יאָריקער iPhone. טעסט איידער איר שיקן.
זאָל איך נוצן ראַו Three.js אָדער react-three-fiber?
נוצן react-three-fiber. עס איז אַ React ראַפּער אַרום Three.js וואָס מאַכט דאָס קאָד דעקלאַראַטיווע און 40-60% קירצער. Vibe Skills 3D סקילז דיפאָלט צו react-three-fiber ווייל עס קאָמפּאָזיעס ריין מיט Next.js, Astro, און Vite. ראַו Three.js איז בלויז ווערט עס פֿאַר פּיור-J S ענדזשאַנז אָדער עקסטרעם אָפּטימיזאַציע.
קען איך נוצן מיין אייגענע 3D מאָדעלס פֿון Blender אָדער Sketchfab?
יא. עקספּאָרט ווי .glb אָדער .gltf פֿון Blender, אָדער דאַונלאָוד .glb טעקעס פֿון Sketchfab און Polyhaven. פּאַט זיי אין דעם אַסעט טעקע, ווייזט דעם סקיל צו די טעקע, געשען. בלעטער 3D סצענע סקילז צו זען אַסעט סלאָט ביישפּילן.
ווי פיל קאָסטס אַ Three.js סקיל קעגן העירן אַ דעוועלאָפּער?
אַ WebGL פרילאַנסער באַצאָלט $120 צו $250 פּער שעה, מיט אַ באַסיק העלד סצענע קאָסטן $2,000 צו $8,000. אַ Vibe Skills אַבאָנעמענט הייבט זיך אָן ביי $39/חודש און ינקלאודס אַנלימיטעד 3D סקילז. דאָס ברעכן-אפֿן פונקט איז איין סצענע.
קען איך בויען אַ פול שפּיל אָן קאָדינג?
יא פֿאַר פּראָטאָטיפּס, מערסטנס יא פֿאַר שיק-גרייט שפּילערייַ. דאָס בראַוזער רייסינג שפּיל סטאַרטער און שפּיל סעטטינג פּאַק אויף Vibe Skills שיפּס אַרבעטנדיקע פיזיק, קאָנטראָלס, און סקאָרינג. איר לייגט לעוועלס, קונסט, און קלאַנג. פּראָדוקציע פּאָליש (מולטיפּלייער, היט סיסטעם, אַנאַליטיקס) נוצט נאָך פון אַ דעוועלאָפּער.
וועט AI-גענערירט Three.js קאָד זיין פאָרמיט?
אויב דאָס סקיל ינקלאודס פאָרשטעלונג פּרע-סעטס, יא. קוק פֿאַר סקילז וואָס שיפּס מיט ציען קאַל בודזשעטן, פראַסטום קולינג, ינסטאַנסט מעשאַז, און טעקסטשער קאַמפּרעשאַן. Vibe Skills 3D סקילז ינקלאודס אַלע פיר דורך דיפאָלט. האַנט-קאָדאַד סצענעס פֿון ביגינעריז זענען יוזשאַוואַלי סלאָוער ווייל די אָפּטימיזאַציעס זענען באַגראָבן אין די דאָקס.
האַלטן קוקן אויף 3D וועב דעמאָס. שיקן דיין אייגענע.
Three.js איז געווען דאָס טויער צו 3D אויף די וועב פֿאַר אַ דעקאַדע. AI סקילז האָבן צעבראָכן דאָס טויער. איר דאַרפֿן ניט מער WebGL וויסן, אַ דעוועלאָפּער הירינג, אָדער אַ 6-חודש לערנען רונאַוויי. איר דאַרפֿן אַ קלאָר סצענע באַשרייבונג, אַ סקיל פֿון Vibe Skills, און אַ אָפּרוטעג.
דיזיינערס שיקן 3D העלדן. גרינדערס שיקן פּראָדוקט קוקערס. סטודענטן שיקן בראַוזער שפּילערייַ. מאַרקעטערס שיקן אינטעראַקטיווער אינפאָגראַפיקס. דאָס באַר איז יעצט קריאַטיוו ריכטונג, ניט GLSL סינטאַקס.
בלעטער Three.js און 3D שפּילערייַ סקילז אויף Vibe Skills →
די וועב גייט 3D. ינסטאָלירן דיין ערשטער Three.js סקיל אויף Vibe Skills און שיקן אַ סצענע דעם אָפּרוטעג.