فلش‌کارت‌های آموزشی پروژه‌های عملی با Three.js برای انیمیشن‌های وب

🎓 دوره آموزشی جامع

📚 اطلاعات دوره

عنوان دوره: پروژه‌های عملی با Three.js برای انیمیشن‌های وب

موضوع کلی: برنامه نویسی

موضوع میانی: انیمیشن‌های وب (Web Animations)

📋 سرفصل‌های دوره (100 موضوع)

• 1. مقدمه‌ای بر گرافیک سه‌بعدی در وب
• 2. WebGL چیست و چه نقشی دارد؟
• 3. آشنایی با کتابخانه Three.js و مزایای آن
• 4. راه‌اندازی محیط توسعه (Node.js, Vite/Webpack)
• 5. ساختار یک پروژه Three.js
• 6. اولین صحنه: آشنایی با Scene، Camera و Renderer
• 7. درک سیستم مختصات سه‌بعدی (X, Y, Z)
• 8. ایجاد اولین شیء: مکعب (BoxGeometry و MeshBasicMaterial)
• 9. حلقه رندر (Render Loop) و انیمیشن با requestAnimationFrame
• 10. متحرک‌سازی یک شیء: چرخش و جابجایی
• 11. آشنایی با انواع دوربین: PerspectiveCamera
• 12. آشنایی با انواع دوربین: OrthographicCamera
• 13. کنترل دوربین با OrbitControls
• 14. مبانی کار با Vector3 برای موقعیت، چرخش و مقیاس
• 15. استفاده از ابزارهای دیباگینگ (مانند lil-GUI)
• 16. واکنش‌گرا کردن صحنه (Responsive Design)
• 17. حالت تمام‌صفحه (Fullscreen)
• 18. آشنایی با هندسه‌ها (Geometries): کره، صفحه، استوانه
• 19. آشنایی با مواد (Materials): MeshStandardMaterial
• 20. مقدمه‌ای بر نورها: AmbientLight
• 21. افزودن نورهای جهت‌دار: DirectionalLight
• 22. کار با رنگ‌ها در Three.js
• 23. مبانی تکسچرها (Textures): بارگذاری و اعمال یک تصویر
• 24. مفهوم UV Unwrapping
• 25. اعمال تکسچرهای مختلف: Color, Alpha, Metalness, Roughness
• 26. افزودن جزئیات با Normal Map
• 27. ایجاد سایه‌های واقع‌گرایانه با Ambient Occlusion Map
• 28. کار با Displacement و Bump Map
• 29. بازتاب‌های محیطی با Environment Map (HDRI)
• 30. بررسی مواد پیشرفته‌تر: MeshPhongMaterial, MeshToonMaterial
• 31. انواع دیگر نورها: PointLight و SpotLight
• 32. استفاده از Helperها برای دیباگ کردن نور و سایه
• 33. تنظیمات سایه‌ها: Cast و Receive Shadow
• 34. بهینه‌سازی سایه‌ها برای عملکرد بهتر
• 35. ساخت هندسه‌های سفارشی با BufferGeometry
• 36. درک مفاهیم Vertices, Faces و Normals
• 37. ایجاد متن سه‌بعدی با TextGeometry
• 38. گروه‌بندی اشیاء با THREE.Group
• 39. مفهوم Scene Graph و سلسله مراتب اشیاء
• 40. شبیه‌سازی و کپی کردن اشیاء (Cloning)
• 41. کار با آرایه‌ای از اشیاء و مدیریت آن‌ها
• 42. استفاده از Clock برای انیمیشن‌های مبتنی بر زمان
• 43. ادغام با کتابخانه‌های انیمیشن: معرفی GSAP
• 44. ایجاد انیمیشن‌های روان و کنترل‌شده با GSAP
• 45. پروژه اول (بخش ۱): طراحی یک منظومه شمسی ساده
• 46. پروژه اول (بخش ۲): متحرک‌سازی سیارات و مدارها
• 47. بارگذاری مدل‌های سه‌بعدی: فرمت GLTF
• 48. استفاده از Blender برای آماده‌سازی و خروجی گرفتن مدل‌ها
• 49. بارگذاری یک مدل GLTF در صحنه
• 50. تعامل با مدل‌های بارگذاری شده
• 51. پخش انیمیشن‌های موجود در فایل GLTF با AnimationMixer
• 52. کنترل انیمیشن‌های مدل: پخش، توقف و ترکیب
• 53. ایجاد ذرات (Particles) با Points و PointsMaterial
• 54. پروژه دوم (بخش ۱): ساخت یک کهکشان با ذرات
• 55. پروژه دوم (بخش ۲): متحرک‌سازی ذرات کهکشان
• 56. تعامل با ذرات بر اساس حرکت موس
• 57. ری‌کستینگ (Raycasting) برای تشخیص برخورد موس با اشیاء
• 58. برجسته کردن اشیاء هنگام قرار گرفتن موس روی آن‌ها
• 59. پروژه سوم (بخش ۱): ساخت یک نمایشگر محصول تعاملی
• 60. پروژه سوم (بخش ۲): افزودن قابلیت چرخش و زوم محصول
• 61. مقدمه‌ای بر شیدرها (Shaders) و زبان GLSL
• 62. ساختار یک شیدر: Vertex Shader و Fragment Shader
• 63. نوشتن اولین Vertex Shader: تغییر موقعیت رئوس
• 64. نوشتن اولین Fragment Shader: تغییر رنگ پیکسل‌ها
• 65. ارسال داده از جاوااسکریپت به شیدرها (Uniforms)
• 66. ارسال داده‌های متغیر به شیدرها (Attributes)
• 67. ایجاد یک صفحه موج‌دار با استفاده از شیدر سفارشی
• 68. پردازش نهایی (Post-processing) با EffectComposer
• 69. اعمال افکت‌های ساده مانند RenderPass
• 70. افزودن افکت درخشش (Bloom) با UnrealBloomPass
• 71. ترکیب چندین افکت پردازش نهایی
• 72. ساخت افکت سفارشی با ShaderPass
• 73. مقدمه‌ای بر فیزیک در دنیای سه‌بعدی
• 74. ادغام با موتور فیزیک Cannon.js
• 75. ایجاد اجسام فیزیکی (Body) و شکل‌ها (Shape)
• 76. اتصال اشیاء Three.js به اجسام فیزیکی
• 77. اعمال نیرو، ضربه و سرعت به اجسام
• 78. مفهوم قیود (Constraints) در فیزیک
• 79. پروژه چهارم (بخش ۱): ساخت یک صحنه سقوط دومینو
• 80. پروژه چهارم (بخش ۲): افزودن تعامل کاربر برای شروع واکنش زنجیره‌ای
• 81. بهینه‌سازی عملکرد: معرفی ابزار Stats.js
• 82. تکنیک‌های بهینه‌سازی: کاهش Draw Calls
• 83. استفاده از InstancedMesh برای رندر کردن تعداد زیادی شیء مشابه
• 84. بهینه‌سازی هندسه‌ها (Geometry Optimization)
• 85. بهینه‌سازی تکسچرها (فشرده‌سازی، Mipmapping)
• 86. استفاده از Level of Detail (LOD) برای اشیاء دور
• 87. مدیریت حافظه و آزادسازی منابع (Disposing Objects)
• 88. شیدرهای پیشرفته: استفاده از توابع نویز (Perlin/Simplex)
• 89. ایجاد افکت‌های رویه‌ای (Procedural) با شیدرها
• 90. تکنیک‌های پیشرفته تکسچرینگ: Matcaps
• 91. پختن (Baking) نور و تکسچر در Blender برای بهینه‌سازی
• 92. مقدمه‌ای بر واقعیت مجازی (VR) با WebXR
• 93. راه‌اندازی یک صحنه ساده VR
• 94. مقدمه‌ای بر واقعیت افزوده (AR) با WebXR
• 95. راه‌اندازی یک صحنه ساده AR و تشخیص سطح
• 96. تعامل با اشیاء در محیط VR و AR
• 97. پروژه نهایی (بخش ۱): ایده‌پردازی و طراحی یک اینترو وبسایت خلاقانه
• 98. پروژه نهایی (بخش ۲): مدل‌سازی و آماده‌سازی Assetهای مورد نیاز
• 99. پروژه نهایی (بخش ۳): ساخت صحنه اصلی و بارگذاری مدل‌ها
• 100. پروژه نهایی (بخش ۴): انیمیشن‌سازی حرکت دوربین در مسیر مشخص