آموزش React Three Fiber (R3F) - توسعه وب سه بعدی تعاملی - آخرین آپدیت

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

تنظیمات محیط توسعه Development environment settings

• نصب کروم، وی‌اس‌کد و آی‌ترم ۲ Install chrome, vscode, and iterm2

• نصب ان‌وی‌ام (ان‌پی‌ام / نود) Install nvm ( npm / node )

• ایجاد یک پروژه با Vite Create a project with Vite

• نحوه وارد کردن کامپوننت‌های سطح ماژول How to import module-level components

• چرا آموزش در مورد جی‌اس و تی‌اس/تایپ‌اسکریپت Why lecture on js and ts/typescript

• نصب R3F، Drei Install R3F, Drei

R3F R3F

• مقدمه بخش / دانلود کد منبع Section Introduction / Source Code Download

• ایجاد یک بوم R3F Creating an R3F Canvas

• مبانی سه‌بعدی - یادگیری درباره کامپوننت‌ها 3D Basics - Learn about Components

• رندرکننده (useFrame) Renderer ( useFrame )

• دوربین (پرسپکتیو، اورتوگرافیک) Camera ( Perspective, Orthographic )

• کنترل‌ها، کمک‌کننده (axesHelper، gridHelper) Controls, Helper ( axesHelper, gridHelper )

• صحنه (Mesh - هندسه + متریال) Scene ( Mesh - Geometry + Material )

• کنترل رابط کاربری گرافیکی (leva) GUI Control ( leva )

شی سه‌بعدی Object 3D

• مقدمه بخش / دانلود کد منبع Section Introduction / Source Code Download

• تبدیل - موقعیت، اندازه، چرخش transformation - position, size, rotation

• مفهوم Object3d - (صحنه، گروه، مش) Object3d Concept - (Scene, Group, Mesh)

• حرکت به صورت گروهی (دستگاه مختصات جهانی، محلی) Moving as a group (World, Local coordinate system)

هندسه Geometry

• مقدمه بخش / دانلود کد منبع Section Introduction / Source Code Download

• مفاهیم هندسه و مدل‌سازی Concepts of geometry and modeling

• ۳ روش برای اضافه کردن مش در R3F 3 ways to add mesh in R3F

• WireFrame، هندسه مشترک، گزینه‌های boxGeometry WireFrame, shared geometry, boxGeometry options

• انواع هندسه پایه، گزینه‌های circleGeometry Basic geometry types, options of circleGeometry

متریال Material

• مقدمه بخش / دانلود کد منبع Section Introduction / Source Code Download

• متریال (wireframe، basic، lambert) material (wireframe, basic, lambert)

• متریال (phong، normal) material (phong, normal)

• متریال (standard، physical، depth) material (standard, physical, depth)

• متریال (matcap، toon) material (matcap, toon)

نور / محیط / سایه Light / Env / Shadow

• نور (Ambient، Hemisphere) / دانلود کد منبع LIght ( Ambient, Hemisphere ) / Source Code Download

• نور (Directional، Point، Spot) LIght ( Directional, Point, Spot )

• محیط envrinonment

• ۳ نوع نور و سایه 3 types of lights and shadows

تعامل و رویداد / raycaster Interaction & event / raycaster

• مقدمه بخش Section Introduction

• انواع رویداد تعامل r3f و تغییرات شی r3f interaction event types and object changes

• جلوگیری از رویداد کلیک شی، توضیح Raycaster Preventing object click event, Raycaster explanation

• دریافت و پردازش یک شی متقاطع با raycaster Receiving and processing an intersect object with raycaster

[پروژه] تنظیمات پروژه ساخت کفش فروشگاه اینترنتی [Project] E-commerce shoe making project setting

• مقدمه بخش / دانلود کد منبع Section Introduction / Source Code Download

• محیط توسعه و تنظیمات پروژه Development environment & project settings

• تنظیمات alias alias settings

[پروژه] درج فایل مدل‌سازی سه‌بعدی کفش [Project] Insert shoe 3D modeling file

• آماده‌سازی فایل‌های مدل‌سازی سه‌بعدی کفش Preparing shoe 3D modeling files

• بارگیری و بررسی فایل‌های OBJ و FBX Load and check OBJ and FBX files

• اصلاح فایل مدل‌سازی کفش با Blender و ذخیره و بارگیری با GLB Modify shoe modeling file with Blender and save and load with GLB

• کلیک بر روی کفش و تغییر رنگ برای هر قسمت Click on the shoe and change the color for each part

[پروژه] کنترل دوربین [Project] Camera Controls

• مدل‌سازی و فایل تصویر و سازماندهی کد Modeling & image file and code organization

• استفاده از کتابخانه Camera Controls Using the Camera Controls Library

• تفاوت بین Zoom در مقابل Dolly و نحوه استفاده از آن Differences between Zoom vs Dolly and how to use it

• حرکت نرم و روان دوربین Move the camera smoothly

• ایجاد جلوه میز گردان با Sin & Cos Create a turntable effect with Sin & Cos

• دریافت و استفاده از رویدادها از کنترل‌های دوربین (control، sleep...) Receiving and using events from camera controls (control, sleep...)

• نمایش مانند فروش کفش Display like selling shoes

• افزودن واقع‌گرایی با افزودن نور و سایه (ContactShadows) Add realism by adding light and shadows (ContactShadows)

[پروژه] ادغام با رابط کاربری React [Project] Integrating with React UI

• طراحی رابط کاربری وب‌سایت فروش کفش با استفاده از هوش مصنوعی مولد Midjourney Designing a shoe e-commerce website UI using generative AI Midjourney

• ایجاد یک نوار منوی بالا با استفاده از React MUI Creating a top menu bar using React MUI

• لیست رنگ ۱ - افزودن ثابت‌ها و فایل‌های SCSS Color List 1 - Adding Constants and SCSS files

• لیست رنگ ۲ - ایجاد یک لیست انتخاب رنگ با React MUI Color List 2 - Creating a color selection list with React MUI

• لیست رنگ ۳ - افزودن رنگ‌ها به وضعیت سراسری Recoil و تغییر رنگ کفش Color List 3 - Add colors to Recoil global status and change shoe color

• لیست رنگ ۴ - افزودن نام شی به وضعیت سراسری Recoil و تغییر رنگ کفش Color List 4 - Add object name to Recoil global state and change shoe color

• لیست رنگ ۵ - تغییر رنگ emissive شی / افزودن شی انتخاب شده پیش‌فرض Color List 5 - Change object emissive color / add default selected object