इस पाठ में, हम जानेंगे कि React Three Fiber द्वारा प्रदत्त useThree और useFrame hooks क्या हैं, उन्हें कैसे और कब उपयोग करना है।

useThree

useThree state मॉडल तक पहुंच प्रदान करता है जिसमें डिफ़ॉल्ट renderer, scene, camera, viewport का आकार, आदि शामिल होते हैं।

जबकि मैं प्रत्येक state गुणों को समझाऊंगा जिसे हम उचित समय पर उपयोग करेंगे, आप documentation में गुणों की पूर्ण सूची पा सकते हैं।

इसे उपयोग करने के लिए, हमें इसे @react-three/fiber से import करना होगा, और फिर इसे हमारे component के भीतर कॉल करना होगा:

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

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

// ...

जबकि useThree को उपयोग करने का यह तरीका काम करता है, यह component को उन अन्य मानों पर फिर से रेंडर कर देगा जिनका हमने destructuring से उपयोग नहीं किया है।

इसके बजाय हम केवल आवश्यक मान पाने के लिए selector pattern का उपयोग कर सकते हैं:

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

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

इस तरीके से, component केवल तभी फिर से रेंडर होगा जब camera मान बदलता है।

ध्यान रखें कि threejs आंतरिक मान प्रतिक्रियाशील नहीं होते हैं। यदि camera.position बदलता है, तो component फिर से रेंडर नहीं होगा। (सौभाग्य से)

अब जब हमारे पास कैमरा तक पहुँच है, तो हम fov (field of view) को zoom in या out करने के लिए संशोधित कर सकते हैं:

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 आधारित लाइब्रेरी है। इसका मतलब है कि हम जो स्क्रीन पर देखते हैं वह एक लूप का परिणाम है जो हर frame पर दृश्य को render करता है। जैसे एक वीडियो छवियों का एक उत्तरवर्ती क्रम है, वैसे ही एक 3D दृश्य frames का एक उत्तरवर्ती क्रम है।

useFrame hook हमें हर rendered frame पर कोड निष्पादित करने की अनुमति देता है, जैसे रनिंग इफेक्ट्स, अपडेटिंग कंट्रोल्स, और एनीमेशन।

60fps को टारगेट करते समय, callback प्रति सेकंड 60 बार बुलाया जाएगा।