ساخت وب ۳ بعدی با React – از صفر تا صد
در این مقاله در مورد روش کار با وب 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 به روش زیر عمل می‌کنیم:
npm install three react-three-fiber
برای نصب با Yarn از دستور زیر استفاده کنید:
yarn add three react-three-fiber
تنها کافی است three.js و این ماژول را اضافه کنید و هیچ وابستگی دیگری مورد نیاز نیست. حجم این دو روی هم 33 کیلوبایت است.
شیوه استفاده
ما از useRef برای دسترسی به mesh مربوط به cube بهره گرفته‌ایم. پس از آن که از سوی three-js مقداردهی شد، می‌توانیم درون Canvas یک اتصال به آن نگه داریم و مقیاس را تغییر دهیم یا جهت‌گیری را در زمانی که ماوس روی آن می‌رود یا لمس می‌شود عوض کنیم.
اگر کمی اسکرول کنید و به canvas نگاه کنید، کامپوننت‌های رسمی دیگری مانند ambientLight و pointLight را از three-js می‌بینید.
سخن پایانی
برای جمع‌بندی این بخش باید اشاره کنیم که اگر می‌خواهید شروع به استفاده از این کتابخانه عالی برای افزودن امکانات 3 بعدی بکنید، باید از این تابع‌ها/قلاب‌ها از Fiber استفاده کنید:
اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:
- مجموعه آموزش‌های JavaScript (جاوا اسکریپت)
- مجموعه آموزش‌های برنامهنویسی
- آموزش ساخت پروژه با فریم ورک React Native
- WebGL چیست؟ — آموزش وب جی ال — به زبان ساده و گام به گام
- ساخت کتابخانه React و انتشار آن در NPM — راهنمای گام به گام
- ۱۰ نکته و ترفند برای بهبود برنامه نویسی React — راهنمای کاربردی
==
مطالب مجله فرادرس را در جستجوی گوگل سریع‌تر ببینید
