آموزش Three.js، React Three Fiber، Drei، React Spring و بیشتر

Three.js, React Three Fiber, Drei, React Spring & More

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: همه چیزهایی را که برای ساختن وب‌سایت‌های همهجانبه و خلاق با استفاده از Three JS نیاز دارید بیاموزید و React چگونه کتابخانه ThreeJs را نصب کنید و آن را در پروژه خود وارد کنید. صحنه در ThreeJs نحوه جابجایی و متحرک سازی اشیا درباره Webpack، NodeJs و ارائه ماژول های ES6 به مشتریان مرورگر بیاموزید. درباره هندسه هایی مانند Box، Sphere، Plane، Torus، TorusKnot و موارد دیگر بیاموزید در مورد Basic، Normal، Lambert، Phong، Standard، Matcap و مواد دیگر بیاموزید ما همچنین یاد خواهیم گرفت که چگونه با استفاده از Particles Learn React Basics و Hooks یک صحنه خیره کننده ایجاد کنیم. مانند useState،useEffect،useRef، و غیره منظور از JSX را بیاموزید. همچنین در مورد React Rules، Styles و غیره اطلاعاتی را کسب خواهد کرد. کامپوننت ها پوشش داده خواهند شد یاد بگیرید که چگونه چیزها را در حین پیمایش متحرک کنید نحوه اضافه کردن صدا در پروژه Shader Materials ما یک کتابخانه انیمیشن به نام React Spring React Post Processing و خیلی چیزهای دیگر را یاد خواهیم گرفت. . . پیش نیازها: دستگاهی که می‌توانید VSCode یا هر کد ویرایشگر دانش پایه جاوا اسکریپت را نصب کنید، باید با let، const، حلقه‌ها، آرایه‌ها، توابع آشنا باشید و دو مورد مهم این است که صبور باشید (لطفا صبور باشید) و تمایل به ساخت برنامه های کاربردی وب سه بعدی دارید

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

در این دوره، همه چیز را در مورد Three.js و برخی از اصول اولیه React خواهید آموخت تا بتوانید وب سایت های سه بعدی را تحت کتابخانه ای به نام React Three Fiber ایجاد کنید

این دوره در 6 بخش اصلی است،

1. Three.js Refresher: برخی از درس‌های دوره three.js من مرور می‌شود، بنابراین می‌توانید متوجه شوید که چه چیزی بعدا توضیح داده می‌شود

2. React: برخی از اصول اولیه React توضیح داده خواهد شد زیرا این دوره عمدتاً در مورد نوشتن کد React

است

3. React Three Fiber: اینجا جایی است که دوره اصلی شروع می شود، جایی که شما یاد خواهید گرفت که چگونه Three.js را با React بنویسید و ترکیب کنید

4. React Three Drei: React درباره ساخت اجزای قابل استفاده مجدد است، ما بسیاری از اجزای Drei را پوشش خواهیم داد

5. React Spring: ما یک کتابخانه انیمیشن مبتنی بر فیزیک را یاد خواهیم گرفت تا سایت شما بهتر به نظر برسد

6. React Post-Processing: Post-processing فیلترهایی هستند که زیبایی را به صحنه اضافه می کنند


همه کدها در پوشه منابع ارائه می‌شوند که در آن می‌توانید پوشه Startup را که کد ابتدای سخنرانی است، و پوشه Last Code را که کد نوشته شده پس از اتمام درس است، پیدا کنید.


اگر در رابطه با درس خاصی با سوالی برخورد کردید، امیدوارم در بخش سوالات من به همه سوالات پاسخ خواهم داد، سوال را مطرح کنید، بنابراین از پرسیدن هیچ سوالی نترسید


از اینکه در دوره من شرکت کردید متشکرم و شما را آنجا خواهم دید.


احمد


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

Three.Js Refresher Three.Js Refresher

  • 1 - سلام مکعب 1 - Hello Cube

  • 2 - دگرگونی 2 - Transformation

  • 3 - انیمیشن 3 - Animation

  • 4 - پک وب 4 - Webpack

  • 5 - هندسه 5 - Geometries

  • 6 - مواد 6 - Materials

  • 7 - ذرات 7 - Particles

واکنش نشان دهید React

  • 1 - مقدمه ای برای React 1 - Introduction to React

  • 2 - First React Application 2 - First React Application

  • 3 - قوانین واکنش 3 - React Rules

  • 4 - استایل ها در React 4 - Styles in React

  • 5 - اجزاء 5 - Components

  • 6 - ساخت شمارنده با استفاده از قلاب UseState 6 - Building a Counter using UseState hook

  • 7 - UseEffect 7 - UseEffect

  • 8 - رندر کردن عناصر به صورت مشروط 8 - Rendering Elements Conditionally

  • 9 - لوازم جانبی 9 - Props

  • 10 - React.memo 10 - React.memo

  • 11 - UserRef 11 - UseRef

واکنش سه فیبر React Three Fiber

  • 1 - مقدمه ای بر React Three Fiber 1 - Introduction to React Three Fiber

  • 2 - اولین برنامه فیبر React خود را بسازید 2 - Build Our First React Fiber Application

  • 3 - اولین برنامه فیبر React خود را بسازید 3 - Build Our First React Fiber Application

  • 4 - useLoader 4 - useLoader

  • 5 - ذرات 5 - Particles

  • 6 - بارگذاری مدل سه بعدی _ پخش انیمیشن ها 6 - Loading 3D Model _ Playing Animations

  • 7 - اشکال زدایی 7 - Debug

  • 8 - رویدادها 8 - Events

واکنش سه دری React Three Drei

  • 1 - مقدمه ای بر دری 1 - Introduction To Drei

  • 2 - محیط و صحنه سازی 2 - Environment & Staging

  • 3 - دوربین 3 - Camera

  • 4 - کنترل ها 4 - Controls

  • 5 - Text، 3DText و Html 5 - Text, 3DText and Html

  • 6 - صدای موقعیتی 6 - Positional Audio

  • 7 - سایه بان 7 - Shaders

  • 8 - MeshPortalMaterial 8 - MeshPortalMaterial

واکنش بهار React Spring

  • 1 - مقدمه ای بر React Spring 1 - Introduction to React Spring

  • 2 - شروع کار 2 - Getting Started

  • 3 - Imperative API 3 - Imperative API

  • 4 - لوازم جانبی 4 - Props

  • 5 - SpringRef 5 - SpringRef

  • 6 - از Springs استفاده کنید 6 - useSprings

  • 7 - useTrail 7 - useTrail

واکنش پس از پردازش React Post-Processing

  • پس پردازش Post-Processing

نمایش نظرات

Udemy (یودمی)

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

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

آموزش Three.js، React Three Fiber، Drei، React Spring و بیشتر
جزییات دوره
11 hours
42
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
445
4.8 از 5
دارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Ahmad Al-shurafa Ahmad Al-shurafa

توسعه دهنده ارشد Front-End