در این مقاله در مورد روش کار با وب 3 بعدی با React صحبت خواهیم کرد. به این منظور از کتابخانه React-Three-Fiber استفاده می‌کنیم. کتابخانه React-Three-Fiber یا به اختصار R3F یک رندر کننده قدرتمند برای صحنه‌های three.js هم برای وب و هم ری‌اکت نیتیو محسوب می‌شود. با استفاده از R3F سرعت ایجاد صحنه‌ها افزایش می‌یابد. همچنین زمان کمتری صرف انجام کارهای خسته‌کننده می‌شود و در عوض زمان بیشتری به تعریف کامپوننت‌های سفارشی اختصاص می‌یابد. به طور خلاصه R3F کارهای زیر را انجام می‌دهد:

  • ایجاد بوم
  • اتصال رویدادها
  • ایجاد اشیای Three.js
  • شروع حلقه رندر

چرا باید از R3F استفاده کنیم؟

در این بخش مزایای به‌کارگیری React-Three-Fiber را با هم مرور می‌کنیم.

صحنه‌های مبتنی بر کامپوننت

3JS به ما امکان می‌دهد که اشیای three.js را به روش اعلانی (declarative) بنویسیم. معنی این حرف آن است که می‌توانیم صحنه خود را با ایجاد کامپوننت‌های ری‌اکت که قابلیت استفاده مجدد دارند و با بهره‌گیری از props ،states و hooks بسازیم.

تابع کمکی داخلی

این کتابخانه به همراه تابع‌های مفیدی از قبیل raycaster ارائه شده است که در هر mesh امکان دسترسی به همه رویدادهای اشاره‌گر مفید مانند onClick ،onPointerOver ،onPointerOut و غیره را فراهم می‌سازد.

قلاب‌ها

این کتابخانه به همراه قلاب‌هایی مانند useFrame یا useThree ارائه شده است که با استفاده از آن‌ها می‌توانیم اشیای مفیدی مانند renderer ،scene ،camera و غیره را به دست آوریم.

عدم وابستگی

از آنجا که این کتابخانه صرفاً یک رندر کننده است، به نسخه three.js وابسته نیست و از این رو می‌توانیم آزادانه نسخه ترجیحی خود را انتخاب کنیم.

رندر مجدد تنها در موارد نیاز

این کتابخانه دقیقاً مانند هر کامپوننت ری‌اکت دیگر کار می‌کند و خود را بر مبنای تغییر وابستگی به‌روزرسانی می‌کند.

نصب

برای نصب این کتابخانه با استفاده از npm به روش زیر عمل می‌کنیم:

برای نصب با Yarn از دستور زیر استفاده کنید:

تنها کافی است three.js و این ماژول را اضافه کنید و هیچ وابستگی دیگری مورد نیاز نیست. حجم این دو روی هم 33 کیلوبایت است.

شیوه استفاده

با استفاده از کامپوننت Canvas می‌توانید یک بوم three.js ایجاد کنید. این بوم کل عرض و ارتفاع کانتینر خود را اشغال می‌کند. سپس درون گره Canvas می‌توانید همه کامپوننت‌های دینامیک مانند سلسله مراتب تودرتوی کامپوننت‌های ری‌اکت و همچنین انواع سفارشی را اضافه کنید. در این مقاله ما یک کامپوننت Box ساخته‌ایم که برخی رفتارهای سفارشی دارد.

ما از useRef برای دسترسی به mesh مربوط به cube بهره گرفته‌ایم. پس از آن که از سوی three-js مقداردهی شد، می‌توانیم درون Canvas یک اتصال به آن نگه داریم و مقیاس را تغییر دهیم یا جهت‌گیری را در زمانی که ماوس روی آن می‌رود یا لمس می‌شود عوض کنیم.

اگر کمی اسکرول کنید و به canvas نگاه کنید، کامپوننت‌های رسمی دیگری مانند ambientLight و pointLight را از three-js می‌بینید.

سخن پایانی

برای جمع‌بندی این بخش باید اشاره کنیم که اگر می‌خواهید شروع به استفاده از این کتابخانه عالی برای افزودن امکانات 3 بعدی بکنید، باید از این تابع‌ها/قلاب‌ها از Fiber استفاده کنید:

کتابخانه‌های سطح بالای دیگری مانند A-FRAME نیز وجود دارند که تجربه‌های مشابهی می‌سازند و صفحه‌هایی با عناصر 3 بعدی روی وب خلق می‌کنند. اما قدرت واقعی R3F این است که می‌تواند به API سطح پایین three.js دسترسی یابد و این وضعیت به شما کمک می‌کند که با کتابخانه خارق‌العاده WebGL بیشتر آشنا شوید. همچنین کمک می‌کند که سلسله مراتب کامپوننت‌ها را به صورت روشنی تعریف کنید تا بتواند بارها مورد استفاده مجدد قرار گیرد.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

میثم لطفی (+)

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

آیا این مطلب برای شما مفید بود؟

نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *