درک چرخش سه‌بعدی در Three.js: زوایای اویلر، کواترنیون‌ها و Gimbal Lock
چرخش ساده به نظر می‌رسد تا وقتی دوربین، انیمیشن و فیزیک وارد ماجرا شوند. یاد بگیرید کی از زوایای اویلر استفاده کنید، کی سراغ کواترنیون بروید و چرا Gimbal Lock رخ می‌دهد.
نوشته‌ها
مجموعه‌ای از به‌روزرسانی‌ها، مقالات و دیدگاه‌هایی که توسط تیم ما به اشتراک گذاشته شده است
درک چرخش سه‌بعدی در Three.js: زوایای اویلر، کواترنیون‌ها و Gimbal Lockچرخش ساده به نظر می‌رسد تا وقتی دوربین، انیمیشن و فیزیک وارد ماجرا شوند. یاد بگیرید کی از زوایای اویلر استفاده کنید، کی سراغ کواترنیون بروید و چرا Gimbal Lock رخ می‌دهد.
آشنایی با three-mesh-bvh: Three.js چطور مدل‌های سه‌بعدی عظیم را سریع‌تر مدیریت می‌کندوقتی کاربر کلیک می‌کند، واقعاً باید همه مثلث‌ها را بررسی کنیم؟ BVH چطور Raycasting، برخورد و پرس‌وجوهای فضایی را روی مدل‌های بزرگ سریع نگه می‌دارد.
تفکر به سبک React Three Fiber: تغییر ذهنیتی که هر توسعه‌دهنده Three.js به آن نیاز داردپس scene.add() کجاست؟ React Three Fiber جای Three.js را نمی‌گیرد؛ شیوه فکر کردن شما درباره ساخت صحنه را تغییر می‌دهد. این مدل ذهنی همه چیز را روشن می‌کند.
آیا تکسچر Base Color شما از قبل Opacity Map دارد؟ 🤔اگر Base Color شما PNG است، باز هم به Opacity Map نیاز دارید؟ راهنمای کوتاه و کاربردی درباره کانال‌های RGBA، alphaMap در Three.js و شفافیت در glTF.19
آشنایی با three-mesh-bvh: Three.js چطور مدل‌های سه‌بعدی عظیم را سریع‌تر مدیریت می‌کند
وقتی کاربر کلیک می‌کند، واقعاً باید همه مثلث‌ها را بررسی کنیم؟ BVH چطور Raycasting، برخورد و پرس‌وجوهای فضایی را روی مدل‌های بزرگ سریع نگه می‌دارد.
تفکر به سبک React Three Fiber: تغییر ذهنیتی که هر توسعه‌دهنده Three.js به آن نیاز دارد
پس scene.add() کجاست؟ React Three Fiber جای Three.js را نمی‌گیرد؛ شیوه فکر کردن شما درباره ساخت صحنه را تغییر می‌دهد. این مدل ذهنی همه چیز را روشن می‌کند.
آیا تکسچر Base Color شما از قبل Opacity Map دارد؟ 🤔
اگر Base Color شما PNG است، باز هم به Opacity Map نیاز دارید؟ راهنمای کوتاه و کاربردی درباره کانال‌های RGBA، alphaMap در Three.js و شفافیت در glTF.
آشنایی با Mipmap و فیلترینگ تکسچر در Three.js (WebGL)
تکسچرهای تار، آبجکت‌های دور که سوسو می‌زنند، الگوهای پرنویز؟ راهنمای کاربردی درباره نمونه‌برداری تکسچر، فیلتر Nearest و Linear و Mipmap برای توسعه‌دهندگان فرانت‌اند سه‌بعدی.
آشنایی با React Hooks در یک پروژه واقعی Three.js (راهنمای کاربردی)
هوک‌های React پل بین منطق رابط کاربری و موتور رندر هستند. نقشه قدم‌به‌قدم useRef، useState، useMemo، useCallback و useEffect در یک اپ واقعی Three.js.
🧠 Three.js در React در برابر React Three Fiber — یک مقایسه کامل و کاربردی
Three.js دستوری داخل React یا React Three Fiber اعلانی؟ مثال‌های کاربردی، معماری، بده‌بستان‌های واقعی و پیشنهاد برای سایت‌های سینمایی مبتنی بر اسکرول.
الگوهای React: HOC در برابر Render Props در برابر Hooks (نگاه مدرن)
مقایسه Higher-Order Component، Render Props و Hooks: کی از هر کدام استفاده کنیم، مثال کد، مزایا و معایب، و اینکه چرا Hooks پایه React مدرن شد.
🧠 آشنایی عمیق با useReducer + TypeScript + Generics (از جونیور تا سنیور)
dispatch پیک است، action نامه است و reducer مدیر. یک مدل ذهنی روشن برای useReducer با actionهای تایپ‌شده، payload و generics.
🧠 کنترل رابط کاربری در React: State در برابر Ref در برابر CSS (با یک مثال واقعی)
همه چیز در رابط کاربری نباید state باشد. کی از state استفاده کنیم، کی یک ref کافی است و کی CSS ساده بهترین ابزار است — با یک مثال واقعی از دکمه حذف.
آشنایی با ارتباط کامپوننت‌ها در React
داده به پایین، اکشن به بالا. چرا والد مالک state است، چرا تابع را به عنوان prop پاس می‌دهیم و فرزند چطور می‌تواند اول منطق رابط کاربری خودش را اجرا کند.
Async/Await در TypeScript — با مثال‌های واقعی در Three.js
Promise، async/await، fetch، axios و Promise.all — توضیح داده‌شده با بارگذاری مدل، تکسچر و فایل HDR در پروژه‌های واقعی Three.js.