في هذا الدرس، سوف نكتشف ما هي useThree و useFrame التي يوفرها React Three Fiber، وكيف ومتى نستخدمها.

useThree

useThree تعطي الوصول إلى نموذج state الذي يحتوي على العارض الافتراضي، المشهد، الكاميرا، حجم العرض، وما إلى ذلك.

بينما سأشرح كل خصائص state التي سنستخدمها في الوقت المناسب، يمكنك العثور على القائمة الكاملة للخصائص في التوثيق.

لاستخدامه، نحتاج إلى استيراده من @react-three/fiber، ثم استدعاؤه داخل مكوننا:

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

const Cube = (props) => {
  const { camera } = useThree();
  // ...
};

// ...

بينما تعمل هذه الطريقة لاستخدام useThree، فإنها ستسبب في إعادة تجسيد المكون عند تغييرات القيم الأخرى غير التي حصلنا عليها من التفكيك.

بدلاً من ذلك يمكننا استخدام نمط selector للحصول فقط على القيم التي نحتاجها:

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

const Cube = (props) => {
  const camera = useThree((state) => state.camera);
  // ...
};

بهذه الطريقة، سيعيد المكون التجسيد فقط عندما تتغير قيمة camera.

تذكر أن القيم الداخلية لـ threejs ليست تفاعلية. إذا تغيرت camera.position، لن يعيد المكون التجسيد. (لحسن الحظ)

الآن لدينا الوصول إلى الكاميرا، يمكننا تعديل fov (مجال الرؤية) للتكبير أو التصغير:

Copy
// ...

const Cube = (props) => {
  const camera = useThree((state) => state.camera);

  const updateFov = (fov) => {
    camera.fov = fov;
    camera.updateProjectionMatrix();
  };

  useControls("FOV", {
    smallFov: button(() => updateFov(20)),
    normalFov: button(() => updateFov(42)),
    bigFov: button(() => updateFov(60)),
    hugeFov: button(() => updateFov(110)),
  });

  // ...
};

// ...

ملاحظات:

• الطريقة updateProjectionMatrix مطلوبة لإخبار threejs بأن الكاميرا قد تغيرت وتحتاج إلى التحديث.
• عن طريق تمرير قيمة سلسلة كناتج أول إلى useControls يمكننا تجميع الخصائص بواسطة مجلد.

تم تحديث مجال الرؤية للكاميرا لدينا بشكل صحيح من العناصر التحكم

useFrame

Threejs هي مكتبة تعتمد على render-loop. هذا يعني أن ما نراه على الشاشة هو نتيجة لحلقة تقوم بعرض المشهد في كل إطار. كما أن الفيديو هو تعاقب للصور، فإن المشهد ثلاثي الأبعاد هو تعاقب للإطارات.

يسمح لنا useFrame بتنفيذ الكود في كل إطار يتم عرضه، مثل تشغيل التأثيرات، وتحديث التحكمات، والرسوم المتحركة.

عند استهداف 60 إطار في الثانية، سيتم استدعاء callback 60 مرة في الثانية.