لطفا جهت اطلاع از آخرین دوره ها و اخبار سایت در
کانال تلگرام
عضو شوید.
آموزش 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
نمایش نظرات