آموزش پیکربندی فیبر React Three.js زیبا - طراحی و کد

Beautiful React Three.js Fiber Configurator - Design & Code bestseller

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.

نمونه ویدیوها: (صرفا برای مشاهده نمونه ویدیو، ممکن هست نیاز به شکن داشته باشید.)

توضیحات دوره: آموزش ایجاد یک پیکربندی سه بعدی با استفاده از Three.js، React Three Fiber، Valtio و Framer Motion. نحوه ایجاد کانسپت طراحی برای یک Configurator بهینه سازی مدل در Blender برای استفاده در آزمایش پیاده سازی configurator با استفاده از React، React Three Fiber و Valtio ایجاد انیمیشن های رابط کاربری فوق العاده آسان با Framer Motion پیش نیازها: دانش قبلی React مورد نیاز است و همچنین در با استفاده از ابزارهای کد آنلاین مانند Code Sandbox. این یک دوره آموزشی اولیه React Three Fiber نیست، بنابراین مهم است که قبل از ثبت نام با کتابخانه آشنا شده باشید. آشنایی با ابزار ساختمانی نیز توصیه می شود.

این دوره به بررسی ایجاد یک پیکربندی زیبا با استفاده از Three.js و React Three Fiber می‌پردازد. خواهیم دید که چگونه طرح های خود را برای برنامه ها می سازم، نحوه بهینه سازی مدل در Blender و صادرات آن برای استفاده در آزمایش را می فهمم. در مرحله بعد، بیایید در ریکت سه فیبر غوطه ور شویم و کل پروژه را اجرا کنیم، از یک صحنه ساده برای بارگذاری مدل، ایجاد تغییرات رنگی، پوشش مفاهیم مدیریت حالت، و استفاده از Framer Motion برای متحرک سازی رابط.

این یک دوره پویا و بسیار متمرکز بر محصول نهایی است. می توانید پیوند پروژه نهایی را در کلاس مقدماتی یا در نمایه توییتر من پیدا کنید.

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

این دوره برای افرادی که با React Environment آشنا هستند، که قبلاً کمی در مورد React Three Fiber می‌دانند و دانش قبلی در مورد استفاده از ابزارهای کد آنلاین مانند CodeSandBox دارند، مناسب است.

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

معرفی Introduction

چه چیزی ایجاد خواهیم کرد؟ What we will be creating?
این دوره چگونه کار می کند؟ How does this course works?

طرح Design

چگونه طرح های خود را برای تجربه های three.js/R3F برنامه ریزی کنید How to plan your designs for three.js / R3F experiences

بهینه سازی سه بعدی 3D Optimization

بهینه سازی مدل Optimizing the model
پخت نور مپ روی بلندر Baking the lightmaps on Blender
در حال صادر کردن مدل برای استفاده در React Three Fiber Configurator Exporting the model to use in React Three Fiber Configurator

React Three Fiber Development React Three Fiber Development

راه اندازی محیط با استفاده از CodeSandBox Environment setup using CodeSandBox
ایجاد صحنه اصلی React Three Fiber Scene Creating the basic React Three Fiber Scene
مدل مخلوط کن را بارگیری کنید Load the blender Model
کاری کنید که مدل از موقعیت ماوس پیروی کند Make the model follows the mouse position
پوشش Intro را ایجاد کنید Create the Intro overlay
پوشش Customizer را ایجاد کنید Create the Customizer overlay
اجرای Valtio برای مدیریت دولتی Implementing Valtio for state management
پیاده سازی پیکربندی رنگ ها Implementing the colors configurator
پیاده سازی انتخابگر برگردان Implementing the decals selector
دکمه دانلود و تنظیمات موبایل Download button and Mobile adjustments
رابط را با حرکت فریمر متحرک کنید Animate the interface with framer motion
نتیجه Conclusion