Claude, Cursor, ਅਤੇ ਹੋਰਾਂ ਲਈ ਸੈਂਕੜੇ ਤਿਆਰ-ਕੀਤੇ ਹੁਨਰ ਬ੍ਰਾਊਜ਼ ਕਰੋ।
Three.js 90% 3D ويب تجربتن کي طاقت ڏي ٿو، ۽ توهان کي هاڻي ان جي ڪوڊ ڪرڻ جي ضرورت ناهي
Three.js اوپن ويب تي 70% کان وڌيڪ 3D مواد پيش ڪري ٿو، ايپل پروڊڪٽ پيجز کان وٺي انڊي برائوزر گيمز تائين. 2025 تائين، ان سان ڪجهه به ٺاهڻ جو مطلب WebGL، شيڊرز، ۽ 200 صفحن جي ڊاڪس سائيٽ سکڻ هو. هاڻي، Vibe Skills تي AI صلاحيتون غير ڊولپرز کي هڪ ويڪ-اينڊ ۾ ڪم ڪندڙ Three.js منظر موڪلڻ جي اجازت ڏين ٿيون - ڪا به رياضي جي ڊگري ناهي، ڪو به اسٽيڪ اوور فلو خرگوش سوراخ ناهي.
هي گائيڊ توهان کي ڏيکائي ٿو ته ڪهڙيون AI صلاحيتون حقيقي Three.js آئوٽ پٽ پيدا ڪن ٿيون، توهان واقعي ڇا ٺاهي سگهو ٿا (گيم ماحول، پروڊڪٽ ڏسڻ وارا، هيرو منظر)، ۽ ڪيئن "منهنجو هڪ خيال آهي" کان "اهو منهنجي ڊومين تي لائيو آهي" تائين ڪيئن وڃجي بغير ڪڏهن به THREE.PerspectiveCamera تعمير ڪندڙ کي هٿ سان ڇهڻ کان.
Claude, Cursor, ਅਤੇ ਹੋਰਾਂ ਲਈ ਸੈਂਕੜੇ ਤਿਆਰ-ਕੀਤੇ ਹੁਨਰ ਬ੍ਰਾਊਜ਼ ਕਰੋ।
Three.js ڇو غير-ڊولپرز لاءِ بند هو
Three.js WebGL جي چوڌاري جاوا اسڪرپٽ لفافي آهي، برائوزر جو لو-ليول 3D گرافڪس API. ان کي سڌو استعمال ڪرڻ لاءِ، توهان کي سمجهڻو هو:
- منظر گراف (ڪئميرا، بتيون، ميش، ۽ اهي ڪيئن nests)
- شيڊرز (vertex ۽ fragment پروگرام GLSL ۾ لکيل)
- جيوميٽري رياضي (ميٽرڪس، quaternion، ورلڊ اسپيس بمقابله مقامي اسپيس)
- پراهرينس بجيٽ (ڊرا ڪال، پوليگون ڳڻپ، ٽيڪسٽر ميموري)
هڪ عام "Hello Cube" ٽيوٽوريل 800 لائين جا جاوا اسڪرپٽ هلائي ٿو ان کان اڳ جو توهان هڪ گھمڻ واري شڪل ڏسو. Active Theory يا Resn جهڙين ايجنسين جا حقيقي پروڊڪشن منظر 5,000 کان 15,000 لائين custom shader pipelines سان هلن ٿا.
اهو دروازو 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 گيمز - Three.js ذريعي مڪمل راند لائق 3D گيمز (ريسنگ، پزل، مني-پليٽ فارمر، برائوزر FPS پروٽوٽائپس)
- انٽرايڪٽو 3D - پروڊڪٽ ڪنفيگريٽر، 3D هيروز، اسڪرول-ڊرائيو منظر، ڊيٽا بصري
Vibe Skills تي 5 AI Three.js صلاحيتون (WebGL جي ضرورت ناهي)
Vibe Skills تي 3D گيمز ڪيٽيگري خاص طور تي غير ڊولپرز لاءِ ٺهيل صلاحيتون رکي ٿو جن کي Three.js آئوٽ پٽ گهرجي. هر هڪ react-three-fiber بوائلر پليٽ، ايسٽ پائيپ لائين، ۽ Cursor-ready ورڪ فلو فائل سان ships.
| صلاحيت جو قسم | اهو ڇا پيدا ڪري ٿو | لاء بهترين |
|---|---|---|
| 3D هيرو منظر بلڊر | Next.js اجزاء جي طور تي اسڪرول-ڊرائيو Three.js منظر | لينڊنگ پيجز، پورٽ فوليو سائيٽون، ايجنسي هوم پيجز |
| برائوزر ريسنگ گيم اسٽارٽر | ٽريڪ، فزڪس، ڪنٽرول سان مڪمل ريسنگ گيم | گيم پروٽوٽائپس، برانڊ activations، hackathons |
| پروڊڪٽ ڪنفيگريٽر | ميٽريل/رنگ جي بدلي سان 360-ڊگري ڏسڻ وارو | اي ڪامرس اسٽور، پروڊڪٽ لانچ، kickstarter پيجز |
| 3D گيم ماحول پيڪ | پري-ٺهيل منظر (جنگل، dungeons، sci-fi، شهري) | انڊي گيمز، اسڪول جا منصوبا، داستاني تجربا |
| انٽرايڪٽو 3D لوگو ريويل | ڪئميرا انيميشن سان 3D ماڊل جي طور تي لوگو | ويب انٽرو، برانڊ فلمون، ڪانفرنس اوپنرز |
Vibe Skills تي 3D گيمز صلاحيتون ڏسو لائيو پريوز ڏسڻ لاءِ. هر صلاحيت وڊيو ڊيمو سان ships آهي تنهنڪري توهان انسٽال ڪرڻ کان اڳ اصل آئوٽ پٽ ڏسو.
آئوٽ پٽ ڪنهن به جديد فريم ورڪ ۾ ڪم ڪري ٿو: Next.js، Astro، Vite، سادي HTML. ڪو به وينڊر لاڪ-ان ناهي.
هڪ ويڪ-اينڊ ۾ پنهنجو پهريون Three.js منظر ٺاهيو
هتي صفر کان توهان جي پنهنجي ڊومين تي هڪ لائيو Three.js منظر تائين عملي رستو آهي.
قدم 1: Vibe Skills تي صحيح صلاحيت چونڊيو
/category/3d-games تي شروع ڪريو ۽ آئوٽ پٽ قسم طرفان فلٽر ڪريو. جيڪڏهن توهان هيرو منظر چاهيو ٿا، 3D هيرو منظر بلڊر کڻو. جيڪڏهن توهان راند لائق گيم چاهيو ٿا، برائوزر ريسنگ گيم اسٽارٽر يا گيم ماحول پيڪ کڻو.
لائيو پريو ڏسو، ڊيمو وڊيو ڏسو، فريم ورڪ مطابقت چيڪ ڪريو (اڪثر Next.js / Vite لاءِ react-three-fiber سان ships). صلاحيت کي Cursor يا Claude Code ۾ انسٽال ڪريو.
قدم 2: Cursor انسٽال ڪريو (يا Claude Code)
ٻئي اوزار AI صلاحيتون هلائي سگهن ٿا. Cursor بصري ايڊيٽنگ لاءِ بهتر آهي ڪوڊ پريو پين سان. Claude Code ٽرمينل-ڊرائيو ورڪ ۽ ايجنٽ ورڪ فلو لاءِ بهتر آهي. هڪ چونڊيو - 5 منٽن ۾ انسٽال ڪريو.
قدم 3: منظر پيدا ڪريو
پنهنجي ايڊيٽر ۾ پروجيڪٽ کوليو، صلاحيت کي سڏيو، جيڪو توهان چاهيو ٿا ان کي سادي انگريزي ۾ بيان ڪريو: "اسپننگ ڪرسٽل هيرو منظر اونداهي نيوي پس منظر سان، هلائڻ وارو اثر، سست آٹو-روٽيشن." AI صلاحيت مڪمل Three.js ڪوڊ پيدا ڪري ٿي، بشمول بتيون، ڪئميرا، ڪنٽرول، ۽ جوابي سائيز.
قدم 4: پنهنجا ايسٽسٽز مٽايو
پنهنجا 3D ماڊل (.glb يا .gltf Sketchfab، Polyhaven، يا Blender exports مان)، ٽيڪسٽر (Polyhaven مفت CC0)، ۽ برانڊ رنگ ڊراپ ڪريو. صلاحيت ۾ ايسٽ slots شامل آهن تنهنڪري توهان منظر کي ٻيهر نه ٺاهيندا.
قدم 5: موبائل لاءِ آپٽيمائيز ڪريو
صلاحيت موبائل فال بئڪ سان ships ڪري ٿي: ڪمزور GPUs تي گهٽ پوليگون ڳڻپ، سادي بتيون، ڪيپڊ فريم ريٽ. حقيقي فون تي پرک ڪريو (Chrome DevTools موبائل ايموليٽر GPU مسئلن کي miss ڪري ٿو). 2-سال پراڻي آئي فون تي 60 FPS جو مقصد بنيادي طور تي.
قدم 6: ڊپلائي ڪريو
Vercel يا Netlify ڏانهن پش ڪريو. Three.js مناظر جامد جاوا اسڪرپٽ آهن - ڪو سرور ناهي، ڪو GPU انسٽانس ناهي، ڪو خاص هاؤسنگ ناهي. 60 سيڪنڊن کان گهٽ ۾ لائيو URL.
Vibe Skills تي Three.js صلاحيتون ڏسو →
اڪثر پڇيا ويندڙ سوال
ڇا مون کي AI Three.js صلاحيتون استعمال ڪرڻ لاءِ WebGL ڄاڻڻ جي ضرورت آهي؟
نه. Vibe Skills تي AI صلاحيتون WebGL کي مڪمل طور تي لپيٽين ٿيون. توهان منظر کي سادي انگريزي ۾ بيان ڪريو ٿا، صلاحيت ڪم ڪندڙ react-three-fiber ڪوڊ پيدا ڪري ٿي، ۽ توهان پنهنجا ايسٽسٽز مٽايو ٿا. سڀ کان وڌيڪ گہرا توهان رنگن جي قدرن ۽ ماڊل فائل رستن جي ايڊيٽنگ آهي.
ڇا منظر موبائل تي آساني سان هلندو؟
ها، جڏهن صلاحيت ۾ موبائل آپٽيمائيزيشن شامل هجي. سڀ Vibe Skills 3D منظر بلڊرز ڊوائيس-ٽائر فال بئڪ سان ships ڪندا آهن: ڪمزور فونن تي لو-پولي ميش، بيڪ گراؤنڊ ٽيبس تي ڪيپڊ فريم ريٽ، ۽ سست لوڊ ٿيندڙ ٽيڪسچر. 2-سال پراڻي آئي فون تي 60 FPS جو مقصد. موڪلڻ کان اڳ پرک ڪريو.
ڇا مون کي را Three.js يا react-three-fiber استعمال ڪرڻ گهرجي؟
react-three-fiber استعمال ڪريو. اهو Three.js جي چوڌاري هڪ React لفافي آهي جيڪو ڪوڊ کي ظاهري ۽ 40-60% ننڍو بڻائي ٿو. Vibe Skills 3D صلاحيتون react-three-fiber کي ڊيفالٽ طور چونڊينديون آهن ڇاڪاڻ ته اهو Next.js، Astro، ۽ Vite سان صاف طور تي مرتب ٿئي ٿو. را Three.js صرف خالص-JS انجڻ يا انتهائي آپٽيمائيزيشن لاءِ لائق آهي.
ڇا مان Blender يا Sketchfab مان پنهنجا 3D ماڊل استعمال ڪري سگهيان ٿو؟
ها. Blender مان .glb يا .gltf جي طور تي ايڪسپورٽ ڪريو، يا Sketchfab ۽ Polyhaven مان .glb فائلون ڊائون لوڊ ڪريو. انهن کي ايسٽ فولڊر ۾ ڊراپ ڪريو، صلاحيت کي فائل ڏانهن اشارو ڪريو، ٿي ويو. 3D منظر صلاحيتون ڏسو ايسٽ سلاٽ مثال ڏسڻ لاءِ.
هڪ 3D اسڪل جي قيمت ڊولپر کي ڀرتي ڪرڻ جي مقابلي ۾ ڪيتري آهي؟
هڪ WebGL فريلانسر $120 کان $250 في ڪلاڪ چارج ڪري ٿو، هڪ بنيادي هيرو منظر $2,000 کان $8,000 تائين هلندو آهي. Vibe Skills سبسڪرپشن $39/مهينو کان شروع ٿئي ٿو ۽ لامحدود 3D صلاحيتون شامل آهن. بريڪ-ايون پوائنٽ هڪ منظر آهي.
ڇا مان ڪوڊنگ کان سواءِ مڪمل گيم ٺاهي سگهان ٿو؟
پروٽوٽائپس لاءِ ها، ship-ready گيمز لاءِ گهڻو ڪري ها. Vibe Skills تي برائوزر ريسنگ گيم اسٽارٽر ۽ گيم ماحول پيڪ ڪم ڪندڙ فزڪس، ڪنٽرول، ۽ اسڪورنگ سان ships ڪري ٿو. توهان سطحون، آرٽ، ۽ آواز شامل ڪريو. پروڊڪشن پولش (ملٽي پليئر، سيved اسٽيٽ، تجزياتي) اڃا تائين ڊولپر کان فائدو وٺندي آهي.
ڇا AI-پيدا ٿيل Three.js ڪوڊ پرفارم ڪندو؟
جيڪڏهن صلاحيت ۾ پرفارمنس پري-سيٽ شامل آهن، ها. اهڙيون صلاحيتون ڳوليو جيڪي ڊرا ڪال بجيٽ، frustum culling، instanced meshes، ۽ ٽيڪسٽر ڪمپريشن سان ships ڪن. Vibe Skills 3D صلاحيتون ڊيفالٽ طور اهي چارئي شامل ڪن ٿيون. شروعات ڪندڙن کان هٿ سان ڪوڊ ڪيل مناظر اڪثر سست هوندا آهن ڇاڪاڻ ته آپٽيمائيزيشن ڊاڪس ۾ دفن هوندا آهن.
3D ويب ڊيموز ڏسڻ بند ڪريو. پنهنجا موڪليو.
Three.js ڏهاڪي تائين ويب تي 3D تائين پهچڻ جو دروازو هو. AI صلاحيتون دروازو ٽوڙيو. توهان کي هاڻي WebGL knowledge، ڊولپر hire، يا 6-مهيني سکيا واري رن وائي جي ضرورت ناهي. توهان کي هڪ واضح منظر جي وضاحت، Vibe Skills مان هڪ صلاحيت، ۽ هڪ ويڪ-اينڊ گهرجي.
ڊزائنر 3D هيروز موڪليندا آهن. باني پروڊڪٽ ڏسڻ وارا موڪليندا آهن. شاگرد برائوزر گيمز موڪليندا آهن. مارڪيٽر انٽرايڪٽو انفوگرافڪس موڪليندا آهن. بار هاڻي تخليقي هدايت آهي، GLSL syntax نه.
Vibe Skills تي Three.js ۽ 3D گيمز صلاحيتون ڏسو →
- ويب 3D ٿي رهيو آهي. Vibe Skills تي پنهنجي پهرين Three.js صلاحيت انسٽال ڪريو ۽ هن ويڪ-اينڊ ۾ هڪ منظر موڪليو.