صدها مهارت آماده برای Claude، Cursor و موارد دیگر را مرور کنید.
Three.js بیشتر تجربیات سهبعدی وب را نیرو میدهد و شما دیگر نیازی به کدنویسی آن ندارید
Three.js بیش از ۷۰ درصد از تمام محتوای سهبعدی در وب باز را نمایش میدهد، از صفحات محصولات اپل گرفته تا بازیهای مستقل مرورگر. تا سال ۲۰۲۵، ساخت هر چیزی با آن به معنای یادگیری WebGL، شیدرها و یک سایت مستندات ۲۰۰ صفحهای بود. اکنون، مهارتهای هوش مصنوعی در Vibe Skills به غیر توسعهدهندگان اجازه میدهد تا یک صحنه Three.js کاربردی را در آخر هفته آماده کنند - بدون نیاز به مدرک ریاضی، بدون افتادن در چاه جستجوی Stack Overflow.
این راهنما به شما نشان میدهد که کدام مهارتهای هوش مصنوعی خروجی واقعی Three.js را تولید میکنند، چه چیزی را میتوانید واقعاً بسازید (محیطهای بازی، نمایشگرهای محصول، صحنههای قهرمان)، و چگونه از "من یک ایده دارم" به "آن روی دامنه من فعال است" برسید، بدون اینکه هرگز یک سازنده THREE.PerspectiveCamera را با دست لمس کنید.
صدها مهارت آماده برای Claude، Cursor و موارد دیگر را مرور کنید.
چرا Three.js قبلاً برای غیر توسعهدهندگان قابل دسترس نبود
Three.js یک پوشش جاوا اسکریپت برای WebGL، API گرافیک سهبعدی سطح پایین مرورگر است. برای استفاده مستقیم از آن، باید درک میکردید:
- گرافهای صحنه (دوربینها، چراغها، مشها و نحوه تو در تو شدن آنها)
- شیدرها (برنامههای ورتکس و فرگمنت نوشته شده در GLSL)
- ریاضیات هندسه (ماتریسها، کواترنیونها، فضای جهانی در مقابل فضای محلی)
- بودجه عملکرد (فراخوانیهای رسم، تعداد چندضلعیها، حافظه بافت)
یک آموزش معمولی "Hello Cube" ۸۰۰ خط جاوا اسکریپت قبل از دیدن یک شکل چرخان اجرا میشود. صحنههای تولیدی واقعی از آژانسهایی مانند Active Theory یا Resn با ۵۰۰۰ تا ۱۵۰۰۰ خط با خطوط لوله شیدر سفارشی اجرا میشوند.
این مانع باعث شد Three.js در دست متخصصان WebGL که ساعتی ۱۲۰ تا ۲۵۰ دلار درآمد داشتند، باقی بماند. طراحان، بازاریابان، بنیانگذاران و دانشجویان میتوانستند کار را تحسین کنند اما هرگز آن را ارائه ندهند.
تغییر در سال ۲۰۲۶: ابزارهای کدنویسی هوش مصنوعی مانند Cursor و Claude اکنون میتوانند یک خلاصه به زبان انگلیسی ساده را بخوانند و صحنههای react-three-fiber کاربردی را خروجی دهند. بستههای مهارت هوش مصنوعی این گردش کار را در نصبهای یک کلیکی بستهبندی میکنند - ساختار، نورپردازی، کنترلهای دوربین، بهینهسازی عملکرد، همه از پیش آماده شده.
صدها مهارت آماده برای Claude، Cursor و موارد دیگر را مرور کنید.
با مهارتهای Three.js + هوش مصنوعی چه چیزی میتوانید بسازید
شما میتوانید پنج نوع خروجی ملموس را بدون نیاز به کدنویسی دستی WebGL ارائه دهید. هر کدام دارای یک دسته Vibe Skills است که گردش کار را دستهبندی میکند.
| نوع خروجی | مثال دنیای واقعی | زمان ساخت (با مهارت هوش مصنوعی) | زمان ساخت (از ابتدا) |
|---|---|---|---|
| محیط بازی | بازی مسابقه ای مرورگر، مینی پلتفرمر، اتاق فرار | ۴-۱۲ ساعت | ۲-۶ هفته |
| نمایشگر محصول | کفش ورزشی ۳۶۰ درجه، تنظیم کننده هدفون، صفحه ساعت | ۲-۶ ساعت | ۱-۳ هفته |
| صحنه قهرمان سهبعدی | پسزمینه صفحه فرود متحرک، سهبعدی هدایت شونده با اسکرول | ۳-۸ ساعت | ۱-۲ هفته |
| اینفوگرافیک تعاملی | زمین چرخان، نمودار موتور منفجر شده، کره داده | ۴-۱۰ ساعت | ۲-۴ هفته |
| نمای وب AR / امتحان کردن | پیشنمایش عینک، قرار دادن اتاق، مدل مقیاس | ۶-۱۵ ساعت | ۳-۶ هفته |
فشردهسازی تقریباً ۱۰ تا ۲۰ برابر است. مهارتها وظایف تکراری (راهاندازی صحنه، نورها، کنترلها، اندازه قابل تنظیم) را مدیریت میکنند تا شما بر جهت خلاقانه تمرکز کنید.
دو دسته Vibe Skills که بیشترین ارتباط را دارند:
- بازیهای سهبعدی - بازیهای سهبعدی کاملاً قابل پخش از طریق Three.js (مسابقه، پازل، مینی پلتفرمر، نمونههای اولیه FPS مرورگر)
- سهبعدی تعاملی - تنظیم کنندههای محصول، قهرمانان سهبعدی، صحنههای هدایت شونده با اسکرول، تجسم دادهها
۵ مهارت Three.js هوش مصنوعی در Vibe Skills (بدون نیاز به WebGL)
دسته بازیهای سهبعدی در Vibe Skills دارای مهارتهایی است که به طور خاص برای غیر توسعهدهندگانی ساخته شدهاند که خروجی Three.js میخواهند. هر کدام با boilerplate react-three-fiber، خط لوله دارایی، و یک فایل گردش کار آماده برای Cursor ارائه میشوند.
| نوع مهارت | چه چیزی تولید میکند | بهترین برای |
|---|---|---|
| سازنده صحنه قهرمان سهبعدی | صحنه Three.js هدایت شونده با اسکرول به عنوان یک مؤلفه Next.js | صفحات فرود، سایتهای نمونه کار، صفحات اصلی آژانس |
| شروع کننده بازی مسابقه ای مرورگر | بازی مسابقه ای کامل با مسیر، فیزیک، کنترل ها | نمونههای اولیه بازی، فعالسازی برند، هکاتونها |
| تنظیم کننده محصول | نمایشگر ۳۶۰ درجه با تعویض مواد/رنگ | فروشگاههای تجارت الکترونیک، راهاندازی محصولات، صفحات کیک استارتر |
| بسته محیط بازی سهبعدی | صحنههای از پیش ساخته شده (جنگل، سیاه چال، علمی تخیلی، شهری) | بازیهای مستقل، پروژههای مدرسه، تجربیات روایی |
| افشای لوگو سهبعدی تعاملی | لوگو به عنوان یک مدل سهبعدی با انیمیشن دوربین | مقدمههای وب، فیلمهای برند، آغازگرهای کنفرانس |
مهارتهای بازیهای سهبعدی را در Vibe Skills مرور کنید تا پیشنمایشهای زنده را ببینید. هر مهارت با یک دموی ویدئویی عرضه میشود تا قبل از نصب، خروجی واقعی را ببینید.
خروجی در هر چارچوب مدرنی کار میکند: Next.js، Astro، Vite، HTML ساده. بدون قفل فروشنده.
اولین صحنه Three.js خود را در یک آخر هفته بسازید
این مسیر عملی از صفر تا یک صحنه Three.js زنده در دامنه خود شما است.
مرحله ۱: انتخاب مهارت مناسب در Vibe Skills
در /category/3d-games شروع کنید و بر اساس نوع خروجی فیلتر کنید. اگر یک صحنه قهرمان میخواهید، سازنده صحنه قهرمان سهبعدی را انتخاب کنید. اگر یک بازی قابل پخش میخواهید، شروع کننده بازی مسابقه ای مرورگر یا بسته محیط بازی را انتخاب کنید.
پیشنمایش زنده را بخوانید، ویدیوی دمو را تماشا کنید، سازگاری چارچوب را بررسی کنید (بیشتر آنها react-three-fiber را برای Next.js / Vite ارائه میدهند). مهارت را در Cursor یا Claude Code نصب کنید.
مرحله ۲: نصب Cursor (یا Claude Code)
هر دو ابزار میتوانند مهارتهای هوش مصنوعی را اجرا کنند. Cursor برای ویرایش بصری با یک پنجره پیشنمایش کد بهتر است. Claude Code برای کارهای مبتنی بر ترمینال و گردش کار عامل بهتر است. یکی را انتخاب کنید - در ۵ دقیقه نصب کنید.
مرحله ۳: تولید صحنه
پروژه را در ویرایشگر خود باز کنید، مهارت را فراخوانی کنید، و آنچه را که میخواهید به زبان انگلیسی ساده توصیف کنید: "صحنه قهرمان کریستال در حال چرخش با پسزمینه سرمهای تیره، اثر شناور، چرخش خودکار آهسته." مهارت هوش مصنوعی کد کامل Three.js، از جمله چراغها، دوربین، کنترلها، و اندازه قابل تنظیم را خروجی میدهد.
مرحله ۴: داراییهای خود را جایگزین کنید
مدلهای سهبعدی خودتان (.glb یا .gltf از Sketchfab، Polyhaven، یا خروجیهای Blender)، بافتها (رایگان CC0 Polyhaven)، و رنگهای برند خود را قرار دهید. این مهارت شامل اسلاتهای دارایی است تا نیازی به بازسازی صحنه نداشته باشید.
مرحله ۵: بهینهسازی برای موبایل
این مهارت با راهحلهای جایگزین موبایل عرضه میشود: تعداد چندضلعیهای کمتر، نورهای سادهتر، نرخ فریم محدود در GPUهای ضعیف. روی یک تلفن واقعی تست کنید (شبیهساز موبایل Chrome DevTools مسائل GPU را نادیده میگیرد). هدف، ۶۰ فریم بر ثانیه بر روی یک آیفون ۲ ساله به عنوان خط پایه است.
مرحله ۶: استقرار
به Vercel یا Netlify فشار دهید. صحنههای Three.js جاوا اسکریپت ایستا هستند - بدون سرور، بدون نمونه GPU، بدون میزبانی ویژه. URL زنده در کمتر از ۶۰ ثانیه.
مهارتهای Three.js را در Vibe Skills مرور کنید →
سوالات متداول
آیا برای استفاده از مهارتهای Three.js هوش مصنوعی باید WebGL را بدانم؟
خیر. مهارتهای هوش مصنوعی در Vibe Skills به طور کامل WebGL را بستهبندی میکنند. شما صحنه را به زبان انگلیسی ساده توصیف میکنید، مهارت کد react-three-fiber کاربردی را خروجی میدهد، و شما داراییهای خود را جایگزین میکنید. عمیقترین کاری که انجام میدهید، ویرایش مقادیر رنگ و مسیرهای فایل مدل است.
آیا صحنه به طور روان روی موبایل اجرا خواهد شد؟
بله، زمانی که مهارت شامل بهینهسازیهای موبایل باشد. تمام سازندههای صحنه سهبعدی Vibe Skills با راهحلهای جایگزین برای سطوح دستگاه عرضه میشوند: مشهای کمچندضلعی در گوشیهای ضعیف، نرخ فریم محدود در تبهای پسزمینه، و بافتهای بارگذاری تنبل. هدف، ۶۰ فریم بر ثانیه روی یک آیفون ۲ ساله است. قبل از انتشار تست کنید.
آیا باید از Three.js خام استفاده کنم یا react-three-fiber؟
از react-three-fiber استفاده کنید. این یک پوشش React برای Three.js است که کد را اعلانی و ۴۰-۶۰٪ کوتاهتر میکند. مهارتهای سهبعدی Vibe Skills به طور پیشفرض از react-three-fiber استفاده میکنند زیرا به خوبی با Next.js، Astro و Vite ترکیب میشود. Three.js خام فقط برای موتورهای جاوا اسکریپت خالص یا بهینهسازی شدید ارزش دارد.
آیا میتوانم از مدلهای سهبعدی خود از Blender یا Sketchfab استفاده کنم؟
بله. به عنوان .glb یا .gltf از Blender خروجی بگیرید، یا فایلهای .glb را از Sketchfab و Polyhaven دانلود کنید. آنها را در پوشه دارایی قرار دهید، مهارت را به فایل اشاره دهید، تمام شد. مهارتهای صحنه سهبعدی را مرور کنید تا مثالهایی از اسلات دارایی را ببینید.
هزینه یک مهارت Three.js در مقابل استخدام توسعهدهنده چقدر است؟
یک فریلنسر WebGL ساعتی ۱۲۰ تا ۲۵۰ دلار دریافت میکند، با یک صحنه قهرمان پایه که ۲۰۰۰ تا ۸۰۰۰ دلار هزینه دارد. اشتراک Vibe Skills از ۳۹ دلار در ماه شروع میشود و شامل مهارتهای سهبعدی نامحدود است. نقطه سربهسر یک صحنه است.
آیا میتوانم یک بازی کامل بدون کدنویسی بسازم؟
بله برای نمونههای اولیه، عمدتاً بله برای بازیهای آماده عرضه. شروع کننده بازی مسابقه ای مرورگر و بسته محیط بازی در Vibe Skills فیزیک، کنترلها و امتیازدهی کاربردی را ارائه میدهند. شما سطوح، هنر و صدا را اضافه میکنید. پرداخت نهایی تولید (چند نفره، وضعیت ذخیره، تجزیه و تحلیل) همچنان از یک توسعهدهنده سود میبرد.
آیا کد Three.js تولید شده توسط هوش مصنوعی عملکرد خوبی خواهد داشت؟
اگر مهارت شامل تنظیمات عملکرد باشد، بله. به دنبال مهارتهایی باشید که با بودجه فراخوانی رسم، کات کردن ناظر، مشهای نمونهسازی شده، و فشردهسازی بافت عرضه میشوند. مهارتهای سهبعدی Vibe Skills به طور پیشفرض هر چهار مورد را شامل میشوند. صحنههای کدنویسی شده دستی توسط مبتدیان معمولاً کندتر هستند زیرا بهینهسازیها در مستندات مدفون شدهاند.
تماشای دموهای وب سهبعدی را متوقف کنید. دموهای خود را ارائه دهید.
Three.js به مدت یک دهه دروازهبان ورود به دنیای سهبعدی در وب بود. مهارتهای هوش مصنوعی دروازه را شکستند. شما دیگر نیازی به دانش WebGL، استخدام توسعهدهنده، یا دوره یادگیری ۶ ماهه ندارید. شما به یک توصیف صحنه واضح، یک مهارت از Vibe Skills، و یک آخر هفته نیاز دارید.
طراحان صحنههای قهرمان سهبعدی ارائه میدهند. بنیانگذاران نمایشگرهای محصول ارائه میدهند. دانشجویان بازیهای مرورگر ارائه میدهند. بازاریابان اینفوگرافیکهای تعاملی ارائه میدهند. اکنون خط مقدم، جهت خلاقانه است، نه سینتکس GLSL.
مهارتهای Three.js و بازیهای سهبعدی را در Vibe Skills مرور کنید →
وب در حال تبدیل شدن به سهبعدی است. اولین مهارت Three.js خود را در Vibe Skills نصب کنید و این آخر هفته یک صحنه را ارائه دهید.