الغوص في التفاعل و Three.js باستخدام تفاعل ثلاثة ألياف

اليوم ، سنتعلم كيفية تكوين واستخدام react-three-fiber لبناء وعرض نماذج ورسوم متحركة ثلاثية الأبعاد في تطبيقات React و React Native.

هذا البرنامج التعليمي مخصص للمطورين الذين يرغبون في معرفة المزيد عن الرسوم المتحركة للنماذج ثلاثية الأبعاد في الويب باستخدام React ولأي شخص لديه قيود مع Three.js مثل عدم القدرة على إنشاء لوحة الرسم ، وربط أحداث المستخدم مثل click الأحداث وبدء حلقة العرض ، react-three-fiber تأتي مع هذه الأساليب. سنقوم ببناء نموذج ثلاثي الأبعاد لفهم كيفية بناء نماذج Three.js ثلاثية الأبعاد باستخدام ألياف ثلاثية react-three-fiber .

الشروع react-three-fiber

Three.js هي مكتبة تسهل إنشاء رسومات ثلاثية الأبعاد في المتصفح ، وتستخدم لوحة قماشية + WebGL لعرض النماذج والرسوم المتحركة ثلاثية الأبعاد ، ويمكنك معرفة المزيد هنا.

React-three-fiber هو عارض React لـ Three.js على الويب وله تفاعل أصلي ، إنه تعزيز للسرعة التي تنشئ بها نماذج ثلاثية الأبعاد ورسومًا متحركة باستخدام Three.js ، وبعض الأمثلة على المواقع التي تحتوي على نماذج ثلاثية الأبعاد ورسوم متحركة يمكن العثور عليها هنا. تقلل react-three-fiber الوقت الذي تقضيه في الرسوم المتحركة بسبب مكوناتها القابلة لإعادة الاستخدام وأحداث الربط وحلقة العرض ، فلنلقِ أولاً نظرة على ما هو Three.js.

يسمح لنا react-three-fiber ببناء مكونات كود threeJS باستخدام حالة React والخطافات والدعائم ، كما أنه يأتي مع العناصر التالية:

كيفية استخدام react-three-fiber

لاستخدام react-three-fiber ، عليك أن تبدأ باستخدام الأوامر أدناه:

NPM

 npm i three react-three-fiber

غزل

 yarn add three react-three-fiber

ملاحظة : لكي تعمل react-three-fiber ، ستحتاج إلى تثبيت three (Three.js) كما فعلنا أعلاه.

بناء نموذج 3D Ludo Dice ومشروع الرسوم المتحركة

سنقوم هنا ببناء نموذج ثلاثي الأبعاد لنرد ludo باستخدام react-three-fiber كما هو الحال في الفيديو أدناه.

create-react-app لتهيئة مشروعنا ، ولفعل ذلك دعنا ننفذ الأمر أدناه على جهازك.

 create-react-app react-three-fiber-ludo-model

يقوم الأمر أعلاه بتهيئة مشروع React داخل آلتنا المحلية ، وبعد ذلك دعنا cd في الدليل ونثبت حزمنا react-three-fiber three .

 cd react-three-fiber-ludo-model npm i three react-three-fiber

بمجرد تثبيت الحزم ، لنبدأ خادم التطوير الخاص بنا باستخدام الأمر

 npm start

يجب أن يبدأ الأمر أعلاه خادم تطوير المشروع الخاص بنا في متصفحنا. بعد ذلك ، دعنا نفتح مشروعنا في محرر النصوص الذي نختاره ، داخل مجلد src الخاص بالمشروع ، واحذف الملفات التالية: App.css و App.test.js و serviceWorker.js و setupTests.js . بعد ذلك ، دعنا نحذف جميع الأكواد التي تشير إلى الملفات المحذوفة على App.js

بالنسبة لهذا المشروع ، سنحتاج إلى مكون Box لنردات ludo ومكون App الخاص بنا الذي قدمته React.

بناء مكون Box

سيحتوي مكون Box على شكل نردات ludo الخاصة بنا ، وصورة نرد ludo وحالة لإبقائه دائمًا في حالة دوران. أولاً ، دعنا نستورد جميع الحزم التي نحتاجها لمكون Box أدناه.

 import React, { useRef, useState, useMemo } from "react"; import { Canvas, useFrame } from "react-three-fiber"; import * as THREE from "three"; import five from "./assets/five.png";

في الكود أعلاه ، useRef و useState و useMemo . سنستخدم خطاف useRef للوصول إلى شبكة النرد وخطاف useState للتحقق من الحالة النشطة لنرد ludo. سيتم استخدام خطاف useMemo لإرجاع الرقم الموجود على النرد. بعد ذلك ، نقوم باستيراد Canvas و useFrame من react-three-fiber ، ويتم استخدام canvas لرسم الرسومات على المتصفح ، بينما يسمح useFrame للمكونات بالربط في حلقة العرض ، وهذا يجعل من الممكن عرض مكون واحد أكثر محتوى آخر. بعد ذلك ، قمنا باستيراد الحزمة three ثم قمنا باستيراد صورة ثابتة لنرد ludo.

التالي بالنسبة لنا هو كتابة المنطق لمكون Box الخاص بنا. أولاً ، سنبدأ ببناء مكون وظيفي ونضيف الحالة إلى المكون الخاص بنا ، دعنا نفعل ذلك أدناه.

 const Box = (props) => { const mesh = useRef(); const [active, setActive] = useState(false); useFrame(() => { mesh.current.rotation.x = mesh.current.rotation.y += 0.01; }); const texture = useMemo(() => new THREE.TextureLoader().load(five), []); return ( <Box /> ); }

في الكود أعلاه ، نقوم بإنشاء مكون Box مع الدعائم ، وبعد ذلك نقوم بإنشاء مرجع يسمى mesh باستخدام خطاف useRef ، وقد فعلنا ذلك حتى نتمكن دائمًا من إرجاع نفس الشبكة في كل مرة.

الشبكة هي عنصر مرئي في مشهد ، وهي عبارة عن كائن ثلاثي الأبعاد يتكون من مضلع ثلاثي ، وعادة ما يتم بناؤه باستخدام الهندسة ، والتي تُستخدم لتحديد شكل النموذج والمواد التي تحدد مظهر النموذج ، يمكنك تعرف على معلومات حول الشبكة هنا ، يمكنك أيضًا معرفة المزيد حول خطاف useRef هنا.

بعد تهيئة mesh ، نحتاج إلى تهيئة حالة useState باستخدام خطاف useState ، وهنا نقوم بإعداد الحالة النشطة والمرتفعة للتطبيق إلى false.

بعد ذلك ، نستخدم خطاف useFrame من react-three-fiber لتدوير الشبكة (نرد ludo) ، باستخدام الكود أدناه

 mesh.current.rotation.x = mesh.current.rotation.y += 0.01;

هنا ، نقوم بتدوير الوضع الحالي للشبكة كل 0.01 ثانية ، ويتم ذلك لإعطاء الدوران حركة جيدة.

 const texture = useMemo(() => new THREE.TextureLoader().load(five), []);

في الكود أعلاه ، نقوم بإنشاء ثابت يسمى texture ونمرر في رد فعل خطاف useMemo كدالة لتحميل لفة نرد جديدة ، وهنا useMemo لحفظ صورة النرد ورقمها. يمكنك التعرف على خطاف useMemo هنا.

بعد ذلك ، نريد عرض مكون Box على المتصفح وإضافة أحداثنا ، ونقوم بذلك أدناه

 const Box = (props) => { return ( <mesh {...props} ref={mesh} scale={active ? [2, 2, 2] : [1.5, 1.5, 1.5]} onClick={(e) => setActive(!active)} > <boxBufferGeometry args={[1, 1, 1]} /> <meshBasicMaterial attach="material" transparent side={THREE.DoubleSide}> <primitive attach="map" object={texture} /> </meshBasicMaterial> </mesh> ); }

في الكود أعلاه ، نعيد مكون Box الخاص بنا ونلفه في mesh ، مررنا جميع خصائص مكون Box باستخدام عامل الانتشار ، ثم أشرنا إلى الشبكة باستخدام خطاف useRef . بعد ذلك ، نستخدم خاصية scale من Three.js لتعيين حجم مربع النرد عندما يكون نشطًا على 2 و 1.5 عندما لا يكون كذلك. أخيرًا وليس آخرًا ، أضفنا حدث onClick لتعيين state على active إذا لم يتم تعيينها افتراضيًا.

 <boxBufferGeometry args={[1, 1, 1]} />

من أجل عرض مربع النرد ، قدمنا ​​مكون boxBufferGeometry من Three.js ، يساعدنا boxBufferGeometry رسم خطوط ونقاط مثل المربعات ، استخدمنا وسيطة args لتمرير المنشئات مثل حجم هندسة الصندوق.

 <meshBasicMaterial attach="material" transparent side={THREE.DoubleSide}>

تُستخدم meshBasicMaterial من Three.js لرسم الأشكال الهندسية في شكل بسيط. هنا قمنا بتمرير سمة attach ومررنا الدعائم THREE.DoubleSide إلى السمة side . يحدد THREE.DoubleSide الجوانب أو المساحات التي يجب أن يتم تقديمها بواسطة react-three-fiber .

 <primitive attach="map" object={texture} />

يتم استخدام المكون primitive من Three.js لرسم رسوم بيانية ثلاثية الأبعاد. قمنا بإرفاق خاصية الخريطة من أجل الحفاظ على الشكل الأصلي لنرد اللودو. بعد ذلك ، سنقوم بعرض مكون Box الخاص بنا في ملف App.js وإكمال مربع نرد ludo ثلاثي الأبعاد. يجب أن يبدو المكون الخاص بك مشابهًا للصورة أدناه.

تقديم 3D Ludo Dice Box

في هذا القسم ، سنقوم بعرض مكون Box الخاص بنا في App.js وإكمال مربع ludo ثلاثي الأبعاد الخاص بنا ، للقيام بذلك أولاً ، دعنا ننشئ مكون App ونلفه بعلامة Canvas ، وهذا لتقديم نماذجنا ثلاثية الأبعاد ، لنفعل ذلك أدناه.

 const App = () => { return ( <Canvas> </Canvas> ); } export default App;

بعد ذلك ، دعنا نضيف ضوءًا إلى الصناديق ، توفر لنا react-three-fiber ثلاثة مكونات لإضاءة نماذجنا ، وهي كالتالي

• ambientLight
  يستخدم هذا لإضاءة جميع الكائنات في مشهد أو نموذج بالتساوي ، فإنه يقبل الدعائم مثل شدة الضوء ، وهذا سوف يضيء جسم نرد ludo.
• spotLight
  ينبعث هذا الضوء من اتجاه واحد ، ويزداد مع زيادة حجم الكائن ، وهذا سوف يضيء نقاط نرد ludo.
• pointLight
  يعمل هذا بشكل مشابه لضوء المصباح الكهربائي ، وينبعث الضوء من نقطة واحدة إلى جميع الاتجاهات ، وسيكون هذا ضروريًا للحالة النشطة لتطبيقنا.

دعنا ننفذ ما ورد أعلاه في تطبيقنا أدناه.

 const App = () => { return ( <Canvas> <ambientLight intensity={0.5} /> <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} /> <pointLight position={[-10, -10, -10]} /> </Canvas> ); } export default App;

في الكود أعلاه ، قمنا باستيراد مكون ambientLight من react-three-fiber وأضفنا كثافة 0.5 إليه ، ثم أضفنا موضعًا وزاوية إلى مكون spotLight و pointLight . الخطوة الأخيرة لتطبيقنا هي عرض مكون الصندوق الخاص بنا وإضافة موضع إلى مربعات النرد ludo ، سنفعل ذلك في الكود أدناه

 <Box position={[-1.2, 0, 0]} /> <Box position={[2.5, 0, 0]} />

عند الانتهاء ، يجب أن يبدو نرد ludo 3D الخاص بك مشابهًا للصورة أدناه:

يتوفر عرض عملي على CodeSandbox.

خاتمة

react-three-fiber جعلت من السهل إنشاء نماذج ثلاثية الأبعاد ورسوم متحركة لتطبيقات React و React Native. من خلال بناء صندوق نرد ludo ثلاثي الأبعاد ، تعلمنا أساسيات Three.js جنبًا إلى جنب مع مكوناته وفوائد react-three-fiber بالإضافة إلى كيفية استخدامه.

يمكنك المضي قدمًا في هذا الأمر من خلال إنشاء نماذج ثلاثية الأبعاد ورسوم متحركة في تطبيقات React و Native عن طريق استخدام react-three-fiber بمفردك. أود أن أرى ما هي الأشياء الجديدة التي توصلت إليها!

يمكنك قراءة المزيد عن Three.js وتفاعل react-three-fiber في المراجع أدناه.

موارد ذات الصلة

• وثائق Three.js
• أساسيات Three.js
• React-Three-fiber GitHub repo بواسطة Poimandres
• رد فعل ثلاثة وثائق الألياف
• React Hooks (useState ، useMemo ، إلخ) الوثائق الرسمية