بوت‌کمپ Three.js: از صفر تا تخصصی

آنچه یاد خواهید گرفت:

•  استفاده از کتابخانه Three.js برای ایجاد و نمایش گرافیک‌های سه‌بعدی در مرورگرهای وب، که ایجاد تجربه‌های سه‌بعدی تعاملی و نوآورانه را آسان‌تر و در دسترس‌تر می‌کند.
•  درک اصول پشت Three.js، شامل معماری، کامپوننت های اصلی و چگونگی تعامل آن با WebGL
•  توانایی ایجاد تجربه‌های سه‌بعدی بسیار نوآورانه و تعاملی با استفاده مستقیم از WebGL در مرورگر وب
•  یادگیری چگونگی استفاده از Blender برای ایجاد مدل‌های سفارشی و اکسپورت کردن آن‌ها برای استفاده در اپلیکیشن های سه‌بعدی.
•  شروع یا شتاب‌دهی به مسیر شغلی خود به عنوان توسعه‌دهنده وب، توسعه‌دهنده بازی، توسعه‌دهنده VR یا هنرمند سه‌بعدی
•  ایجاد یک پورتفولیوی شخصی آنلاین به شکل یک بازی ویدئویی سه‌بعدی تحت مرورگر که مدل‌های سه‌بعدی و مصورسازی‌های تعاملی را نمایش می‌دهد
•  کشف چگونگی ساخت اپلیکیشن های سه‌بعدی تعاملی با استفاده از Three.js، شامل توسعه VR و بازی
•  یادگیری برنامه‌نویسی گرافیک سه‌بعدی، شامل تبدیلات هندسی، نورپردازی، متریال‌ها و تکسچر

این دوره Three.js تمام بهترین شیوه ها و روندهای روز Three.js را پوشش می‌دهد و بر کارایی متمرکز است.

این بدان معناست که دیگر نیازی نیست وقت خود را صرف آموزش‌های گیج‌کننده، قدیمی و ناقص کنید.

در عوض، ما شما را به سرعت از مبانی اولیه فراتر می‌بریم تا بتوانید با استفاده از آخرین نسخه Three.js، تجربه‌های سه‌بعدی تعاملی و شگفت‌انگیز مرورگر را به تنهایی بسازید و به یک توسعه‌دهنده حرفه‌ای Three.js تبدیل شوید.

داستان‌های موفقیت، خود گویای همه چیز هستند.

فارغ‌التحصیلان Zero To Mastery اکنون در شرکت‌هایی مانند Google، Tesla، Amazon ،Apple ،IBM ،Uber ،Facebook ،Shopify و دیگر شرکت‌های برتر فناوری مشغول به کار هستند. آن‌ها همچنین به عنوان فریلنسرهای برتر فعالیت می‌کنند و در حالی که از راه دور در سراسر جهان کار می‌کنند، درآمد کسب می‌کنند. این فرد می‌توانید شما باشید.

مهم‌تر از همه، شما از Jesse Zhou یاد خواهید گرفت، یک متخصص ارشد صنعت که تجربه واقعی کار با Three.js و محیط‌های سه‌بعدی را دارد.

Three.js چیست؟

کتابخانه Three.js یک کتابخانه جاوااسکریپت است که برای ایجاد و نمایش گرافیک‌های سه‌بعدی در مرورگرهای وب استفاده می‌شود.

این کتابخانه بر پایه WebGL ساخته شده است؛ ابزاری قدرتمند که توانایی ایجاد تجربه‌های سه‌بعدی بسیار نوآورانه و تعاملی را مستقیماً در مرورگر وب فراهم می‌کند.

پس این همه به چه معناست...؟ این بدان معناست که Three.js به شما اجازه می‌دهد تا خلاقیت خود را آزاد کنید و وب‌سایت‌هایی با تجربه‌های سه‌بعدی جذاب و غوطه‌ورکننده بسازید که دارای «فاکتور شگفت‌انگیز» هستند.

یکی از مزایای اصلی استفاده از Three.js این است که فرآیند ایجاد گرافیک‌های سه‌بعدی با استفاده از WebGL را به طور چشمگیری ساده می‌کند. در حالی که WebGL یک API بسیار قدرتمند برای ایجاد گرافیک‌های سه‌بعدی است، یادگیری و استفاده مؤثر از آن می‌تواند چالش‌برانگیز باشد.

کتابخانه Three.js بسیاری از پیچیدگی‌های WebGL را انتزاع می‌کند و آن را برای توسعه‌دهندگانی که تازه با برنامه‌نویسی گرافیک سه‌بعدی آشنا شده‌اند، بسیار آسان‌تر و در دسترس‌تر می‌سازد.

با استفاده از Three.js، توسعه‌دهندگان جاوااسکریپت می‌توانند صحنه‌ها و انیمیشن‌های سه‌بعدی پیچیده‌ای ایجاد کنند که دستیابی به آن‌ها با استفاده از فناوری‌های سنتی وب دو‌بعدی مانند HTML و CSS دشوار یا حتی غیرممکن بود.

این کتابخانه طیف وسیعی از ابزارها و ویژگی‌ها را ارائه می‌دهد، مانند پشتیبانی از نورپردازی، متریال‌ها، دوربین‌ها و هندسه، که ایجاد مصورسازی‌ها و بازی‌های سه‌بعدی واقعاً چشمگیر را آسان می‌کند.

چه کسانی باید Three.js را یاد بگیرند؟

صادقانه بگوییم، ما فکر می‌کنیم که همه باید Three.js را یاد بگیرند... زیرا واقعاً فوق‌العاده است! اما اگر به دنبال یافتن شغل رویایی خود هستید، در اینجا چند نقش شغلی مهم وجود دارد که Three.js برای آن‌ها مفید است:

توسعه‌دهندگان وب: اگر شما یک توسعه‌دهنده وب فعلی هستید یا قصد دارید بشوید، می‌توانید از Three.js برای ایجاد مصورسازی‌های خیره‌کننده، اینفوگرافیک‌های تعاملی و دیگر محتوای سه‌بعدی جذاب برای وب‌سایت‌های خود استفاده کنید.

علاوه بر این، با افزایش محبوبیت واقعیت مجازی (VR) و واقعیت افزوده (AR)، اهمیت Three.js برای ایجاد تجربه‌های غوطه‌ورکننده‌ای که به کاربران اجازه می‌دهد محیط‌های سه‌بعدی را به صورت بلادرنگ بررسی کنند، روز به روز بیشتر می‌شود.

توانایی ایجاد صفحات وب «سنتی» دو‌بعدی یک مهارت رایج در میان توسعه‌دهندگان وب است، به ویژه با افزایش محبوبیت بسیاری از ابزارهای سایت‌ساز بدون کد. اما توانایی ایجاد تجربه‌های سه‌بعدی در وب با استفاده از Three.js به توسعه‌دهندگان اجازه می‌دهد تا واقعاً متمایز شوند.

شخصاً، مدرس دوره پورتفولیوی سه‌بعدی خود را با استفاده از Three.js ساخت و از طریق آن در اینترنت مشهور شد. تعداد درخواست‌هایی که او برای ساخت وب‌سایت‌هایی که ظاهر و حس پورتفولیوی سه‌بعدی‌اش را تقلید می‌کنند دریافت می‌کند، بسیار زیاد است. او به ندرت خود را تبلیغ می‌کند یا وقت برای جذب مشتری صرف می‌کند، زیرا کیفیت کار خودش گویای همه چیز است. این یک مثال عالی است از اینکه چگونه مهارت‌های منحصر به فرد و قدرتمند Three.js برای توسعه‌دهندگان وب بسیار مورد تقاضا هستند.

توسعه‌دهندگان بازی: اگر می‌خواهید وارد حوزه توسعه بازی شوید، یادگیری Three.js یک مهارت فوق‌العاده برای اضافه کردن به جعبه ابزار شماست.

چرا؟ زیرا توسعه‌دهندگان بازی می‌توانند از Three.js برای ایجاد بازی‌های غنی و جذاب استفاده کنند که مستقیماً در مرورگر اجرا می‌شوند، بدون اینکه نیاز باشد کاربران نرم‌افزار اضافی دانلود یا نصب کنند.

کتابخانه Three.js انواع ویژگی‌ها و ابزارها را ارائه می‌دهد که می‌تواند برای رندر صحنه‌های بازی استفاده شود و به گونه‌ای پیاده‌سازی شده است که از گردش کار استاندارد صنعت و پایپ‌لاین‌های رندر سه‌بعدی پشتیبانی می‌کند.

توسعه‌دهندگان واقعیت مجازی: فضای نوظهور واقعیت مجازی (VR) نیز یک حوزه در حال رشد است که Three.js در آن محبوبیت بیشتری پیدا می‌کند.

با توانایی ایجاد گرافیک‌های سه‌بعدی که می‌توانند به صورت بلادرنگ رندر شوند، Three.js می‌تواند برای ایجاد تجربه‌های واقعیت مجازی استفاده شود که مستقیماً از طریق ابزارهایی مانند مرورگر وب Oculus Quest با استفاده از WebXR قابل دسترسی هستند، بدون نیاز به نصب یک اپلیکیشن اختصاصی.

هنرمندان سه‌بعدی: کتابخانه Three.js همچنین برای هنرمندان سه‌بعدی که می‌خواهند کارهای خود را در وب نمایش دهند، مفید است.

با استفاده از Three.js، هنرمندان سه‌بعدی می‌توانند گالری‌ها و پورتفولیوهای تعاملی ایجاد کنند که به کاربران اجازه می‌دهد کارهای آن‌ها را به صورت بلادرنگ بررسی کنند. کتابخانه Three.js از فرمت‌های فایل استاندارد صنعت و پایپ‌لاین‌های رندر پشتیبانی می‌کند.

در اینجا مواردی که این دوره Three.js پوشش می‌دهد، آمده است:

این دوره، مانند تمام دوره‌های Zero To Mastery، یک موجود زنده است که به طور مداوم بروزرسانی می‌شود. این بدان معناست که این دوره مرجع اصلی شما برای یافتن جدیدترین بهترین شیوه ها و منابع Three.js در طول مسیر شغلی‌تان خواهد بود!

در اینجا مروری بر آنچه در این دوره یاد خواهید گرفت، آورده شده است. این دوره به سه بخش بزرگ تقسیم شده است که هر کدام به زیربخش‌هایی تقسیم می‌شوند.

1. شروع کار با Three.js: قبل از شیرجه زدن به دنیای Three.js، داشتن منابع ضروری و دانش پیش‌نیاز بسیار حیاتی است. این بخش به عنوان پایه عمل می‌کند و شما را با ماهیت Three.js، دانش پیش‌نیاز مورد نیاز و چگونگی یافتن مستندات رسمی Three.js آشنا می‌کند.

در اینجا برخی از جزئیات آنچه یاد خواهید گرفت آورده شده است:

Three.js چیست: یادگیری مفاهیم و قابلیت‌های اصلی Three.js.

الهام‌بخشی: آشنایی با مجموعه‌ای از نمونه‌های Three.js برای شروع کار.

مستندات Three.js: درک و آشنایی با مستندات رسمی Three.js.

2. اصول Three.js: شما به مفاهیم اصلی Three.js، مانند ایجاد صحنه‌ها، دستکاری مش‌ها و کار با دوربین‌ها می‌پردازید. در پایان این بخش، شما با استفاده از مهارت‌های جدیدی که کسب کرده‌اید، یک صحنه سه‌بعدی جذاب از منظومه شمسی ایجاد خواهید کرد.

در اینجا برخی از جزئیات آنچه یاد خواهید گرفت آورده شده است:

Hello World (اولین صحنه شما): یادگیری چگونگی راه‌اندازی اولین صحنه Three.js.

دوربین: درک انواع مختلف دوربین‌ها و ویژگی‌های آن‌ها.

دستکاری مش‌ها: یادگیری چگونگی تغییر شکل و انیمیت کردن آبجکت های سه‌بعدی

مش - هندسه‌ها و متریال‌ها: بررسی انواع مختلف هندسه‌ها و متریال ها

تکسچرها: درک چگونگی اعمال و دستکاری تکسچرها

نورپردازی و سایه‌ها: یادگیری چگونگی ایجاد نورپردازی و سایه‌های واقع‌گرایانه

3. Three.js پیشرفته و ایجاد پورتفولیو: شما از مهارت‌های Three.js خود برای ایجاد یک پورتفولیوی شخصی‌سازی شده استفاده خواهید کرد که مانند یک بازی سوم شخص طراحی شده است. این پورتفولیو به عنوان گواهی بر توانایی فنی و خلاقیت شما عمل خواهد کرد.

در اینجا برخی از جزئیات آنچه یاد خواهید گرفت آورده شده است:

• ساختار کد پورتفولیو: یادگیری معماری یک پروژه Three.js
• Pre-Loader: درک چگونگی ایجاد صفحه پیش‌بارگذاری برای دارایی‌های شما
• فیزیک: پیاده‌سازی فیزیک دنیای واقعی در صحنه‌های سه‌بعدی
• ورودی‌های اولیه: یادگیری چگونگی کنترل آبجکت ها با استفاده از ورودی‌های صفحه کلید
• فیزیک کاراکتر: پیاده‌سازی یک کنترل‌کننده کاراکتر برای حرکات پیچیده‌تر
• کنترل‌کننده دوربین: یادگیری چگونگی ایجاد کنترل‌کننده‌های دوربین اول شخص و سوم شخص
• بدن آواتار: اضافه کردن یک آواتار سه‌بعدی به صحنه
• کنترل‌کننده انیمیشن: پیاده‌سازی انیمیشن‌ها برای آواتار سه‌بعدی شما
• ایجاد محیط با Blender و Three.js: یادگیری چگونگی ایجاد محیط‌های سه‌بعدی پیچیده
• مدیریت تعامل: پیاده‌سازی عناصر تعاملی مانند پورتال‌ها