3D दृश्य में कैमरा की स्थिति और एनिमेशन कैसे करें, इसके लिए हमारे पास कुछ तरीके हैं:

• कैमरा की स्थिति और रोटेशन को मैन्युअली सेट करना।
• विभिन्न प्रकार के नियंत्रणों का उपयोग करना, जैसे कि OrbitControls।

लेकिन कभी-कभी, हमें कैमरा पर अधिक नियंत्रण की आवश्यकता होती है, और इसे ठीक से करने के लिए बहुत सारे कोड और गणना की आवश्यकता होती है। सौभाग्य से, हमारे पास इसके लिए लाइब्रेरीज़ हैं।

जिस लाइब्रेरी का हम उपयोग करने जा रहे हैं उसे camera-controls कहते हैं। यह एक छोटी लाइब्रेरी है जो हमें विभिन्न प्रकार के कैमरा मूवमेंट्स और एनिमेशन आसानी से करने की अनुमति देती है।

सौभाग्य से, Drei के पास इस लाइब्रेरी के लिए एक wrapper है, जिससे हम इसे कुछ लाइनों के कोड के साथ उपयोग कर सकते हैं।

स्टार्टर प्रोजेक्ट

इस लाइब्रेरी की विभिन्न विशेषताओं की खोज करने के लिए, हम एक शानदार 3D स्लाइडर बनाने जा रहे हैं ताकि हम नए iPhone 15 Pro Max Black को प्रदर्शित कर सकें।

कृपया iPhone 16 के रिलीज़ होने पर मुझसे संपर्क करें ताकि मैं इस पाठ को अपडेट कर सकूं 🤭

स्टार्टर प्रोजेक्ट में शामिल हैं:

• Apple iPhone 15 Pro Max Black मॉडल द्वारा polyman। Creative Commons Attribution के अंतर्गत लाइसेंस प्राप्त।
• एक UI कंपोनेंट जिसमें Tailwind CSS के साथ बनाया गया एक स्लाइडर शामिल है, जिसे हम बाद में प्रोजेक्ट में जोड़ेंगे।

अभी के लिए हम केवल iPhone मॉडल देख सकते हैं

आइए कैमरा नियंत्रणों के साथ खेलना शुरू करें।

कंट्रोल्स

कैमरा कंट्रोल्स को सक्षम करने के लिए, हमें प्रारंभिक प्रोजेक्ट में पहले से मौजूद OrbitControls को Drei के CameraControls कॉम्पोनेंट से बदलना होगा।

हम कंट्रोल को एक्सेस करने और इसके मेथड्स का उपयोग करने के लिए एक संदर्भ भी जोड़ेंगे।

Experience.jsx:

Copy
// ...
import { CameraControls } from "@react-three/drei";
import { useRef } from "react";

export const Experience = () => {
  const controls = useRef();
  return (
    <>
      <CameraControls ref={controls} />
      {/* ... */}
    </>
  );
};

ऐसा करने से, हम OrbitControls के साथ बड़े अंतर को नहीं देख सकते हैं। हम अभी भी कैमरा को rotate, pan और zoom कर सकते हैं।

API में भी कई समान कंट्रोल्स होते हैं जैसे distance, zoom, polarAngle, azimuthAngle, ...

CameraControls कॉम्पोनेंट तब सबसे अच्छा होता है जब हम कैमरे को animate करना चाहते हैं।

हम सभी उपलब्ध कंट्रोल्स पर नहीं जाएंगे, लेकिन हम सबसे सामान्य वाले देखेंगे। आप पूरी सूची camera-controls documentation में पा सकते हैं।

डॉली

dolly नियंत्रण हमें कैमरा को आगे और पीछे ले जाने की अनुमति देता है।

आइए Leva का उपयोग करके बटन जोड़ते हैं ताकि कैमरा को आगे और पीछे ले जाया जा सके:

Copy
// ...
import { button, useControls } from "leva";

export const Experience = () => {
  // ...

  useControls("dolly", {
    in: button(() => {
      controls.current.dolly(1, true);
    }),
    out: button(() => {
      controls.current.dolly(-1, true);
    }),
  });
  // ...
};

dolly विधि का पहला तर्क वह दूरी है जो हम कैमरे को स्थानांतरित करना चाहते हैं। दूसरा तर्क एक boolean है जो इंगित करता है कि हम आंदोलन को एनिमेट करना चाहते हैं या नहीं।

अब हमारा कैमरा आगे और पीछे गति कर सकता है

यदि हम OrbitControls के साथ समान परिणाम प्राप्त करना चाहते, तो हमें कैमरे और टारगेट की नई स्थिति की गणना करनी होती। तब हमें कैमरे और टारगेट को उनकी नई स्थितियों में एनिमेट करना होता।

Truck

truck नियंत्रण हमें कैमरा को ऊपर, नीचे, बाएँ और दाएँ ले जाने की अनुमति देता है बिना कैमरा की दिशा बदले।

जैसा कि हमने dolly नियंत्रण के साथ किया था, आइए बटन जोड़ते हैं truck नियंत्रण को प्रयोग करने के लिए:

Copy
// ...

export const Experience = () => {
  // ...
  useControls("truck", {
    up: button(() => {
      controls.current.truck(0, -0.5, true);
    }),
    left: button(() => {
      controls.current.truck(-0.5, 0, true);
    }),
    down: button(() => {
      controls.current.truck(0, 0.5, true);
    }),
    right: button(() => {
      controls.current.truck(0.5, 0, true);
    }),
  });
  // ...
};

truck मेथड के पहले दो argument वे horizontal और vertical दूरी हैं जिन्हें हम कैमरा को ले जाना चाहते हैं। तीसरा argument एक boolean है जो इंगित करता है कि हम मूवमेंट को ऐनिमेट करना चाहते हैं या नहीं।

आप कैमरा को तिरछा ले जाने के लिए horizontal और vertical दूरी के लिए विभिन्न मानों का उपयोग कर सकते हैं।

Rotate

Camera Controls माउस को OrbitControls से खींचते समय जो हम आंदोलन करते हैं, उसे प्रोग्रामेटिकली कैमरा को उसके लक्ष्य के चारों ओर घुमाने का एक तरीका प्रदान करते हैं।

चलो कैमरा को उसके लक्ष्य के चारों ओर घुमाने के लिए बटन जोड़ते हैं:

Copy
// ...

export const Experience = () => {
  // ...
  useControls("rotate", {
    up: button(() => {
      controls.current.rotate(0, -0.5, true);
    }),
    down: button(() => {
      controls.current.rotate(0, 0.5, true);
    }),
    left: button(() => {
      controls.current.rotate(-0.5, 0, true);
    }),
    right: button(() => {
      controls.current.rotate(0.5, 0, true);
    }),
  });
  // ...
};

rotate मेथड के तर्क हैं:

• azimuthAngle: क्षैतिज कोण रैडियंस में।
• polarAngle: ऊर्ध्वाधर कोण रैडियंस में।
• enableTransition: एक बूलियन जो दर्शाता है कि क्या हम आंदोलन को एनीमेट करना चाहते हैं या नहीं।

Smooth time

जब हम enableTransition argument का उपयोग करते हैं, तो हम smoothTime property का उपयोग करके एनीमेशन समय को नियंत्रित कर सकते हैं।