React-Native و Three.js – انجمن DEV

یک پروژه CLI react-native جدید ایجاد کنید:

npx react-native init Learn3DApp

ترجیح داده می شود که دستگاه های واقعی برای دیدن خروجی داشته باشید. مدل سه بعدی می تواند بر روی شبیه ساز اندروید اجرا شود، اما مشکلاتی در شبیه ساز iOS وجود دارد. اسکرین شات هایی که در این پروژه iOS خواهید دید همگی روی یک دستگاه فیزیکی هستند.

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

yarn add three @react-three/fiber

سپس دستور زیر را اجرا کنید:

npx install-expo-modules@latest

حداکثر دو سوال از شما می پرسد. در زیر نحوه پاسخ من به هر یک آمده است:

• install-expo-modules @0.10.2 خوب است ادامه دهید؟ (y) y
• ادغام Expo CLI را نصب کنید؟ … نه

Expo CLI را در مرحله بعد به صورت دستی نصب می کنیم.

در زیر اسکرین شات من است install-expo-modules نصب:

برای نصب بسته زیر باید expo-cli را به صورت جهانی نصب کنید. اگر از expo-cli ندارید استفاده کنید npm install -g expo-cli ابتدا آن را به صورت سراسری بر روی سیستم خود نصب کنید و سپس دستور زیر را در پوشه پروژه خود اجرا کنید.

expo install expo-gl

موارد فوق بسته های اساسی مورد نیاز برای بارگذاری یک مدل سه بعدی هستند. اما ما یک بسته پشتیبانی دیگر به نام نصب خواهیم کرد سه، این به شما در مورد three.js کمک می کند که همه توسط همان https://docs.pmnd.rs/ ارائه شده است.

• سه کمک هایی را در اختیار ما قرار می دهد که کار با سه بعدی را آسان می کند. بدون Drei، باید بسیاری از ویژگی های رایج سه بعدی (مانند کنترل ها، لودرها، نقشه های محیطی) را به صورت دستی تنظیم و پیکربندی کنید که می تواند زمان بر و مستعد خطا باشد.

برای نصب پکیج Drei این کار را انجام دهید:

yarn add @react-three/drei

پس از تمام نصب‌های زیر، اکنون وابستگی‌ها در پروژه من به نظر می‌رسند: (expo به صورت خودکار توسط install-expo-modules)

بعد، به metro.config.js و این کد را به آن اضافه کنید:

  resolver: {
    sourceExts: ['js', 'jsx', 'json', 'ts', 'tsx', 'cjs', 'mjs'],
    assetExts: ['glb', 'gltf', 'png', 'jpg'],
  },

برای اندروید فقط انجام دهید cd android && ./gradlew clean و برای iOS انجام دهید cd ios && pod install در این نقطه

اکنون اجرا می کنیم و آزمایش می کنیم که آیا نمایشگاه با موفقیت پیوند خورده است و تنها در این صورت کار با موارد سه بعدی را شروع می کنیم. همانطور که expo-gl بسته بسیار مهمی است که هنگام تلاش برای اجرای سه بعدی بر روی دستگاه های تلفن همراه در یک محیط react-native استفاده می شود.

باز کنید App.tsx و همه چیز را حذف کنید و فقط داشته باشید:

import React from 'react';
import Constants from 'expo-constants';

console.log(Constants.systemFonts);

export default function App() {
  return (
    <>>
  );
}

پروژه را اجرا کنید yarn start --reset-cache. این console.log(Constants.systemFonts); باید این را برای شما در ترمینال چاپ کند تا از نصب موفقیت آمیز اطمینان حاصل شود:

مطمئن شوید که یک صفحه خالی بدون هیچ خطایی برای iOS و Android مشاهده می کنید.

حالا که چیزهای کسل کننده از سر راه هستند، بیایید کار سه بعدی را شروع کنیم. شما به یک مدل سه بعدی نیاز دارید که در برنامه بارگیری می کنید.

وب سایت های زیادی وجود دارد که می توانید مدل های سه بعدی را به صورت رایگان در آنها پیدا کنید. درست مانند اینکه تصاویر دارای فرمت‌های JPG، PNG و بسیاری از فرمت‌های مختلف هستند، فرمت فایل سه‌بعدی که می‌خواهید دانلود کنید می‌تواند یکی از این دو باشد. .gltf یا .glb.

من می دانم https://www.cgtrader.com/ که وب سایت خوبی برای یافتن مدل های سه بعدی است .gltf یا .glb فرمت‌ها، می‌توانید فیلترهایی را برای دانلود مدل‌های رایگان اعمال کنید.

من قصد دارم از https://poly.pizza/bundle/Farm-Animal-Pack-1kUvRTPLzT استفاده کنم روی GLTF را دانلود کنید و به شما می دهد .glb فایل های حیوانات مختلف

در پروژه ایجاد کنید src پوشه، و در داخل یک ایجاد کنید models پوشه را کپی کنید Horse.glb یا هر فایل حیوانی در models پوشه

بعد، باید یک JSX از فایل GLB نیز داشته باشیم. برای انجام این کار، به https://gltf.pmnd.rs/ بروید و فایل GLB را رها کنید و یک پیش نمایش با کد JSX مانند تصویر زیر به شما نشان می دهد:

کد را کپی کنید و یک فایل جدید به نام ایجاد کنید Horse.tsx در پوشه Models و در آنجا پیست کنید.

برای رفع خطاها موارد زیر را انجام می دهیم:

• تغییر دهید from '@react-three/drei' به from '@react-three/drei/native'
• حذف کنید props و {...props}
• آخرین خط کد را حذف کنید useGLTF.preload('/Horse.glb');
• مسیر فایل را با require در const { nodes, materials, animations } = useGLTF(...
• تابع Model را ساخته است export default و نام آن است Horse از Model

اسکرین شات زیر من کامل است Horse.tsx اکنون نگاه می کند:

نگران نباشید nodes, materials, animations زیر خط قرمز بزنید زیرا اینها فقط چیزهایی هستند که انواع خاصی را درخواست می کنند.

بعد، باز کنید App.tsx و کد زیر را در آن اضافه کنید:

وارد کردن React, { Suspense } از 'react'; وارد کردن { Canvas } از '@react-three/fiber/native'; وارد کردن { OrbitControls } از '@react-three/drei/native'; وارد کردن { View } از 'react-native'; واردات اسب از './src/models/Horse'; const App = () => { const renderHorseCanvas = () => { بازگشت (
      
        
        
        
        
          
          
            
            
          
        
        
      
    );
  };

  return {renderHorseCanvas()};
};

export default App;

Re-run the project and you’ll see the horse model being rendered.

It seems like there is a divide between the shadow and the actual horse body. But it’s nothing that a minor position repositioning cannot fix. Let’s change the renderHorseCanvas code to the one below:

  const renderHorseCanvas = () => {
    return (
      
       //... remaining code
          
          //... remaining code
      
    );
  };

This is how you render a 3D using three js in your react-native app.

Bonus: Animations

The horse we’ve added is still and doesn’t do anything. This glb file includes animations like Idle, Jump, Run, Walk, etc.

In Horse.tsx we had a line of code const { actions } = useAnimations(animations, group); which we’ll use.

In Horse.tsx before the main return ( add this code:

//... remaining code
  const { actions, names } = useAnimations(animations, group);
  console.log('animations names: ', names);
  // animations names:  ["Armature|Death", "Armature|Idle", "Armature|Jump", "Armature|Run", "Armature|Walk", "Armature|WalkSlow"]
  useEffect(() => { // پخش انیمیشن "Idle" const idleAction = actions['Armature|WalkSlow']; if (idleAction) { idleAction .reset() .setLoop(LoopRepeat, Infinity) // تنظیم حالت حلقه و تکرارهای بی نهایت .fadeIn(0.5) .play(); } return () => { // انیمیشن "Idle" را هنگامی که کامپوننت خارج شد متوقف شود if (idleAction) idleAction.fadeOut(0.5); }; }، [actions]) //... کد باقی مانده

اینم کد کامل:

شما می توانید تمام انیمیشن های موجود هر فایل GLB یا GLTF را با console.log('animations names: ', names);. من بازیکن را دارم Armature|WalkSlow انیمیشن در LoopRepeat برای اینکه حس جالبی به اسب پیاده‌روی بدهید که در زیر می‌توانید ببینید، می‌توانید نامی متفاوت از آن اضافه کنید نام انیمیشن ها و ببینید چگونه به نظر می رسند.

در حال باز کردن در یک دستگاه اندرویدی، این انیمیشن جالب را می بینم:

موارد اضافی:

در اینجا چند چیز و منابع اضافی وجود دارد که ممکن است کمک کننده باشد:

به محض اینکه مدل سه بعدی رندر می شود، دائماً این چاپ را در ترمینال دریافت می کردم:

LOG EXGL: gl.pixelStorei() هنوز از این پارامتر پشتیبانی نمی کند!

این مشکلی ندارد زیرا هیچ تاثیری برای تولید نخواهد داشت، مثل اینکه خراب نمی‌شود، که مطمئناً این است. اگر برنامه شما در حال خراب شدن است، باید مشکل دیگری وجود داشته باشد. من یک راه حل پیدا کردم https://github.com/expo/expo/issues/11063 نمی گویم ایده آل است اما کار می کند.

راه حل بیان می کند که در App.tsx یا فایلی که در آن دارید Canvas از @react-three/fiber یک پایه به آن اضافه کنید:

       {
          const _gl = state.gl.getContext();
          const pixelStorei = _gl.pixelStorei.bind(_gl);
          _gl.pixelStorei = function (...args) {
            const [parameter] = args;
            switch (parameter) {
              case _gl.UNPACK_FLIP_Y_WEBGL:
                return pixelStorei(...args);
            }
          };
        }}>
//... rest of the code

این معجون جادویی باعث از بین رفتن چوب می شود.

در اینجا منبعی برای یافتن مدل های سه بعدی به صورت رایگان وجود دارد: https://www.cgtrader.com/free-3d-models

پروژه ای دارید و از من می خواهید به آن نگاه کنم، می توانید من را در upwork استخدام کنید: https://www.upwork.com/freelancers/~01e4982cf39ced7048

اگر مایل به حمایت هستید می توانید از طریق https://buymeacoffee.com/chaudhrytalha این کار را انجام دهید

من هم در مدیوم می نویسم تا بتوانید آنجا هم مرا دنبال کنید: https://ibjects.medium.com/