آموزش Three.js مدرن برای وب سایت های واقعی

Modern Three.js for Real Websites

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: یاد بگیرید که یک سایت نمونه کار سه بعدی و با کیفیت عالی ایجاد کنید که شما را لیگ ها جلوتر از رقبایتان قرار دهد نحوه نصب Three js و وارد کردن آن به پروژه خود چگونه ویژگی های بافر کار می کنند و چگونه آنها را در آرایه ها رمزگشایی کنید نحوه استفاده از Three js raycaster برای ایجاد تعاملات موش به صحنه نحوه استفاده از ابرهای سه نقطه js برای ایجاد کهکشانی از ستارگان نحوه عبور از صحنه خود با حرکت دوربین سه بعدی چگونه اندازه صحنه خود را با استفاده از شنوندگان رویداد جاوا اسکریپت تغییر دهید چگونه صحنه خود را بلادرنگ با استفاده از رابط کاربری گرافیکی ویرایش کنید ( رابط کاربری گرافیکی) نحوه راه‌اندازی یک سرور Vite ساده برای وارد کردن و صادر کردن ماژول‌ها چگونه هندسه‌ها و مواد با هم کار می‌کنند تا شبکه‌ها را تشکیل دهند. در یک چارچوب (Nuxt js) تا بتوانید به صورت یکپارچه از صحنه سه بعدی خود به صفحات مختلف وب منتقل شوید.

لطفاً بخوانید: این یک دوره رایگان است — 2 و نیم ساعت اول رایگان است (شما می توانید در اینجا در Udemy [یا YouTube] با دکمه «پیش نمایش» هر ویدیو تماشا کنید)، در حالی که 2 و نیم ساعت باقی مانده نیاز به خرید دوره من همیشه یکی از مدافعان سرسخت انتشار اصول اولیه به هر چه بیشتر مردم بوده‌ام، زیرا معتقدم دانش و رشد شخصی برخی از بهترین راه‌ها برای بهتر کردن دنیای ما در کل هستند. لذت ببرید.

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

اسم من کریستوفر لیس است و من یک مهندس Full-Stack برنده جایزه با بیش از ده سال تجربه توسعه وب هستم. من مستقیماً با مشتریانی مانند دانشگاه هاروارد، مسابقات بسکتبال و آژانس های برنده جوایز برتر مانند Brave People کار کرده ام.

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

در اینجا همه چیز را از:

یاد خواهید گرفت

- نصب Three.js

- تنظیم صحنه

- تغییرات هندسه برنامه‌ای

- جلوه های شناور سه بعدی

- رابط کاربری گرافیکی

- ادغام HTML و Three.js

- پاسخگویی به صحنه

- ادغام برنامه تک صفحه ای

- استقرار

و خیلی چیزهای دیگر.

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


سرفصل ها و درس ها

یک منظره فضایی تعاملی Three.js ایجاد کنید Create an Interactive Three.js Space Landscape

  • آنچه ما در حال توسعه هستیم What We're Developing

  • Three.js و Vite را نصب کنید Install Three.js and Vite

  • صحنه ها، دوربین ها و رندرها Scenes, Cameras, and Renderers

  • اولین مش شما Your First Mesh

  • هندسه صفحه The Plane Geometry

  • چراغ های جهت دار Directional Lights

  • دستکاری هندسه ها با عمق و ناهمواری Manipulating Geometries with Depth and Jaggedness

  • ویرایش لحظه به لحظه صحنه با Dat.GUI Real-Time Scene Editing with Dat.GUI

  • کنترل مدار و چرخش صحنه Orbit Controls and Scene Rotation

  • جلوه های شناور هندسه Geometry Hover Effects

  • رنگ محو شدن اثر شناور Color Fade Hover Effect

  • خیاط هواپیما به ابعاد دقیق Tailor Plane to Exact Dimensions

  • حرکت رأس تصادفی Randomized Vertex Movement

  • همپوشانی HTML و CSS در صحنه Overlay HTML and CSS On Scene

  • یک Starfield ایجاد کنید Create a Starfield

  • متن را در بارگذاری اولیه متحرک کنید Animate Text On Initial Load

  • انتقال حرکت دوربین Camera Movement Transitions

  • پاسخگویی صحنه و تغییر اندازه مرورگر Scene Responsiveness and Browser Resizing

  • هنگامی که انیمیشن کامل شد به وب سایت خارجی پیوند دهید Link to External Website When Animation Completes

ادغام در Nuxt.js برای انتقال بدون درز Integrate Into Nuxt.js for Seamless Transitions

  • Refactor و ادغام در Nuxt.js Refactor and Integrate Into Nuxt.js

  • فونت های گوگل Nuxt Nuxt Google Fonts

  • یکپارچه سازی مسیریابی Nuxt Nuxt Routing Integration

  • انتقال بدون درز صفحه Seamless Page Transitions

  • Nuxt را با Netlify اجرا کنید Deploy Nuxt with Netlify

نمایش نظرات

آموزش Three.js مدرن برای وب سایت های واقعی
جزییات دوره
5 hours
24
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
1,531
4.4 از 5
ندارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Christopher Lis Christopher Lis

موسس دوره های کریس/مهندس ارشد تمام پشته