في هذا الدرس سنقوم بإعداد بيئتنا بجميع الأدوات التي نحتاجها لبدء بناء أول تطبيق ثلاثي الأبعاد. ثم سنقوم بإنشاء أول مشروع React وتثبيت التبعيات التي نحتاجها.

نظام التشغيل الخاص بك لا يهم. أنا أستخدم ماك، ولكن يمكنك المتابعة على ويندوز أو لينكس أيضًا.

Visual Studio Code

يمكنك استخدام أي محرر شيفرة تريده، ولكن أنصح باستخدام Visual Studio Code. إنه مجاني، ومفتوح المصدر، ويحتوي على عدد كبير من الإضافات الرائعة.

يمكنك تحميله من هنا: https://code.visualstudio.com/

إذا اخترت استخدام Visual Studio Code، إليك بعض الإضافات التي أوصي بها:

• ESLint: أداة تحقيق للغة JavaScript وJSX. سوف تعرض لك الأخطاء والتحذيرات في شيفرتك.
• Prettier: مهيئ الشيفرة. سيقوم بتهيئة شيفرتك تلقائيًا بناءً على إعداداتك عند الحفظ.
• Copilot: شريك برمجي مدعوم بالذكاء الاصطناعي. سيساعدك على كتابة الشيفرة بشكل أسرع من خلال اقتراح سطور الشيفرة بناءً على السياق.

Node.js

Node.js هو وقت تشغيل JavaScript مبني على محرك JavaScript V8 من Chrome. يسمح لك بتشغيل شيفرة JavaScript خارج المتصفح. في حالتنا، سنستخدمه لتشغيل خادم التطوير لمشاريعنا.

يمكنك تنزيله من هنا: https://nodejs.org/en/download/

قم بتنزيل إصدار LTS. إنه الإصدار الأكثر استقرارًا.

Yarn

Yarn هو مدير الحزم للغة JavaScript. إنه مشابه لـ npm، لكنه أسرع وأكثر أمانًا.

يمكنك تنزيله هنا: https://classic.yarnpkg.com/en/docs/install

سنستخدمه لتثبيت المكتبات التي نحتاجها لمشاريعنا. على سبيل المثال Three.js، React Three Fiber، إلخ...

Vite

Vite هو أداة بناء للمشاريع الويب الحديثة. إنه سريع، خفيف الوزن و سهل الاستخدام.

لا يتطلب تثبيتًا.

لإنشاء مشروع React جديد، افتح الطرفية لديك (في Visual Studio Code يمكنك فتحها من القائمة Terminal > New Terminal) وقم بتشغيل الأمر التالي:

Copy
yarn create vite

بعد ذلك، اكتب اسم مشروعك، اضغط enter، وبسهام لوحة المفاتيح اختر React كإطار عمل و JavaScript كلغة.

ينبغي أن ترى شيئًا كهذا:

الآن في Visual Studio Code، افتح مجلد المشروع بالنقر على Open Folder وتحديد المجلد الذي قمت بإنشائه للتو.

في الطرفية، قم بتشغيل الأوامر التالية لتثبيت التبعات وبدء خادم التطوير لمشروعك:

Copy
yarn
yarn dev

يجب أن توفر لك الطرفية عنوان URL محلي للوصول إلى مشروعك:

افتحه في متصفحك أو استخدم الاختصار cmd + click على Mac أو ctrl + click على Windows/Linux على URL وينبغي أن ترى صفحة Vite React الافتراضية:

لدينا الآن مشروع React يعمل. حان الوقت لتثبيت المكتبات التي نحتاجها.

React Three Fiber

لإضافة r3f إلى مشروعنا، قم بتشغيل الأمر التالي في الطرفية:

Copy
yarn add three @types/three @react-three/fiber

إذا كانت الطرفية لا تزال تعمل على خادم التطوير، أوقفه بالضغط على cmd + c في نظام Mac أو ctrl + c في نظام Windows/Linux قبل تشغيل الأمر أعلاه.

سيقوم ذلك بتثبيت three و react-three-fiber كاعتمادات لمشروعنا.

بمجرد الانتهاء، قم بإزالة ملف App.css واستبدل محتوى index.css بما يلي:

Copy
#root {
  width: 100vw;
  height: 100vh;
}

body {
  margin: 0;
}

هذا سيجعل canvas الخاص بنا يملأ الشاشة بأكملها.

استبدل محتوى App.jsx بما يلي:

Copy
import { Canvas } from "@react-three/fiber";

function App() {
  return (
    <Canvas>
      <mesh>
        <boxGeometry />
        <meshNormalMaterial />
      </mesh>
    </Canvas>
  );
}

export default App;

مكون Canvas هو جذر كل تطبيقات r3f. إنه مكون React يقوم بإنشاء WebGL context ومشهد Three.js.

داخل مكون Canvas لدينا مكون mesh. الـmesh هو كائن يمكن عرضه في المشهد. يتكون من geometry وmaterial.

لا تقلق إذا كنت لا تفهم ما هو geometry أو material، سنغطيهما في الدروس التالية. فقط اعلم أن هذا الكود سيعرض مكعبًا في منتصف الشاشة.

ثم شغل yarn dev مرة أخرى لتشغيل خادم التطوير مع الاعتمادات الجديدة.

يجب أن ترى مربعًا في وسط الشاشة:

لكن يبدو ثنائي الأبعاد وليس ثلاثي الأبعاد، هذا لأن المكعب متواجد أمام camera.

يمكننا تحريك الكاميرا قليلاً للأعلى، إلى اليمين و للخلف بإضافة خاصية camera إلى مكون Canvas:

Copy
<Canvas camera={{ position: [3, 3, 3] }}>

سنتناول كيفية عمل التموضع في الدروس التالية.

الآن المكعب مرئي بصورة ثلاثية الأبعاد:

الإصدارات ⚠️

Three.js وReact Three Fiber هما مكتبتان يتم تحديثهما بشكل متكرر. هذا يعني أن الكود الذي تراه في هذه الدورة التدريبية أو الدروس الأخرى قد يتصرف بشكل مختلف إذا كنت لا تستخدم نفس الإصدار.

في وقت كتابة هذه الدورة، Three.js في طريقها إلى WebGPU والذي قد يحمل تغييرات جذرية أو تغييرات في طريقة عرض الأشياء.

باستخدام حزمة البداية المقدمة مع هذه الدورة، ستضمن الحصول على نفس الإصدارات كإصداري، ولكن من المهم معرفة كيفية التحقق من إصدارات التبعية الخاصة بك.

افتح ملف package.json وابحث عن كائنات dependencies وdevDependencies:

Copy
{
  "name": "react-three-fiber-starter",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@react-three/drei": "^9.74.14",
    "@react-three/fiber": "^8.13.0",
    "@types/three": "^0.152.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "three": "^0.153.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.37",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^4.0.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "vite": "^4.3.9"
  }
}

يمكنك رؤية أن إصدار Three.js هو ^0.153.0 وأن إصدار React Three Fiber هو ^8.13.0.

الرمز ^ يعني أننا نستخدم إصدار semver. هذا يعني أننا سنحصل على جميع تحديثات المكتبة حتى الإصدار الرئيسي الجديد التالي.

لتعلم المزيد عن Semantic Versioning تحقق من هذا الرابط: https://devhints.io/semver

ESLint

إذا قمت بتثبيت ملحق ESLint لـ Visual Studio Code، يجب أن ترى بعض الأخطاء في الشيفرة الخاص بك.

هذا لأن ملف التكوين الافتراضي الذي أنشأه Vite لا يتضمن قواعد r3f.

لإصلاح ذلك، افتح ملف .eslintrc.cjs وأضف هذا السطر إلى مصفوفة extends:

Copy
"plugin:@react-three/recommended",

يجب أن يبدو الملف بالكامل كما يلي:

Copy
module.exports = {
  env: { browser: true, es2020: true },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
    "plugin:react-hooks/recommended",
    "plugin:@react-three/recommended",
  ],
  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
  settings: { react: { version: "18.2" } },
  plugins: ["react-refresh"],
  rules: {
    "react-refresh/only-export-components": "warn",
  },
};

الآن بعد حفظ الملف، يجب أن تختفي الأخطاء.

لكي نتمكن من تدقيق الشيفرة الخاص بنا، نحتاج إلى تثبيت الحزمة @react-three/eslint-plugins في dev dependencies لمشروعنا:

Copy
yarn add -D @react-three/eslint-plugin

سيقوم -D بتثبيت الحزمة كـ dev dependency. (حيث أنها ليست ضرورية في البناء النهائي للإنتاج)

Drei

Drei هي مجموعة من الأدوات المساعدة والاختصارات المفيدة التي تُضاف إلى r3f.

سنستخدمها كثيرًا في الدروس القادمة لإنشاء تجارب ثلاثية الأبعاد بسهولة وسرعة.

لتثبيت حزمة drei نفّذ الأمر التالي في الطرفية:

Copy
yarn add @react-three/drei

الخاتمة

لقد قمنا بتثبيت جميع التبعيات التي نحتاجها لمشاريعنا وأصبح لدينا الآن مشروع r3f يعمل. من هنا سنبدأ في إنشاء تجاربنا ثلاثية الأبعاد.