एनीमेशन आपकी 3D सीन को जीवन में लाने के लिए महत्वपूर्ण हैं। इन्हें उपयोगकर्ता इंटरैक्शन, स्क्रॉल या समय के आधार पर लागू किया जा सकता है और 3D ऑब्जेक्ट्स, लाइट्स और कैमरों पर लागू किया जा सकता है।

एनीमेशन में महारत हासिल करना एक महत्वपूर्ण स्किल है जिससे आप आकर्षक अनुभव बना सकते हैं। जितनी अधिक तकनीकें आप जानते हैं, उतनी ही आप अपनी रचनात्मकता व्यक्त कर सकते हैं।

नोट: 3D मॉडल एनीमेशन को मॉडल्स चैप्टर में कवर किया गया है।

Lerp

Lerp एक गणितीय फ़ंक्शन है जो दो मूल्यों के बीच इंटरपोलेट करता है। यह एक मूल्य को एक बिंदु से दूसरे बिंदु तक एनिमेट करने के लिए उपयोगी है।

Copy
const value = THREE.MathUtils.lerp(start, end, t);

पहला पैरामीटर प्रारंभिक मूल्य है, दूसरा पैरामीटर अंतिम मूल्य है और तीसरा पैरामीटर 0 और 1 के बीच इंटरपोलेशन फैक्टर है।

इंटरपोलेशन फैक्टर जितना 0 के करीब होगा, एनीमेशन उतना ही धीमा होगा। इंटरपोलेशन फैक्टर जितना 1 के करीब होगा, एनीमेशन उतनी ही तेजी से अंतिम या लक्ष्य मूल्य तक पहुंच जाएगा।

चलो स्टार्टर पैक के AnimatedBox कॉम्पोनेंट पर इसका प्रयोग करते हैं।

कॉम्पोनेंट में एक boxPositions array है जिसमें अलग-अलग समय पर बॉक्स की स्थितियाँ होती हैं। चलो एक useFrame hook जोड़ते हैं ताकि बॉक्स की स्थिति समय के आधार पर अपडेट हो सके:

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

export const AnimatedBox = ({ boxPositions, ...props }) => {
  const box = useRef();

  useFrame(({ clock }) => {
    const seconds = parseInt(clock.getElapsedTime());
    const targetPosition = boxPositions[seconds % boxPositions.length];

    box.current.position.x = targetPosition.x;
    box.current.position.y = targetPosition.y;
    box.current.position.z = targetPosition.z;
  });
  // ...
};

यहाँ हमारा बॉक्स एनिमेट नहीं है। यह एक स्थिति से दूसरी स्थिति में टेलीपोर्ट कर रहा है। आइए lerp फ़ंक्शन का उपयोग करके इसे एनिमेट करें:

Copy
import * as THREE from "three";
// ...

export const AnimatedBox = ({ boxPositions, ...props }) => {
  const box = useRef();

  useFrame(({ clock }) => {
    const seconds = parseInt(clock.getElapsedTime());
    const targetPosition = boxPositions[seconds % boxPositions.length];
    box.current.position.x = THREE.MathUtils.lerp(
      box.current.position.x,
      targetPosition.x,
      0.05
    );
    box.current.position.y = THREE.MathUtils.lerp(
      box.current.position.y,
      targetPosition.y,
      0.05
    );
    box.current.position.z = THREE.MathUtils.lerp(
      box.current.position.z,
      targetPosition.z,
      0.05
    );
  });
  // ...
};

अब बॉक्स एनिमेटेड है। यह एक स्थिति से दूसरी स्थिति में सुचारू रूप से चलता है।

Vector3 क्लास में lerp मेथड है जिसका उपयोग THREE.MathUtils.lerp फ़ंक्शन के बजाय किया जा सकता है:

Copy
// box.current.position.x = THREE.MathUtils.lerp(
//   box.current.position.x,
//   targetPosition.x,
//   0.05
// );
// box.current.position.y = THREE.MathUtils.lerp(
//   box.current.position.y,
//   targetPosition.y,
//   0.05
// );
// box.current.position.z = THREE.MathUtils.lerp(
//   box.current.position.z,
//   targetPosition.z,
//   0.05
// );
box.current.position.lerp(targetPosition, 0.05);

यह समान परिणाम के लिए बहुत सारी लाइनें बचाता है!

समय के साथ खेलने और rotation या scale जैसी अन्य प्रॉपर्टीज पर lerp करने से अलग-अलग प्रभाव आजमाने के लिए संकोच न करें।

Float

Float Drei लाइब्रेरी से एक wrapper component है जो एक वस्तु के तैरने का प्रभाव देने के लिए उपयोग किया जाता है।

इसमें निम्नलिखित props शामिल होते हैं:

• speed: एनीमेशन की गति, डिफ़ॉल्ट 1
• rotationIntensity: XYZ घूर्णन तीव्रता, डिफ़ॉल्ट 1
• floatIntensity: ऊपर/नीचे तैरने की तीव्रता, floatingRange के साथ गुणक की तरह काम करता है, डिफ़ॉल्ट 1
• floatingRange: y-अक्ष के मानों की श्रेणी जिसमें वस्तु तैरेगी, डिफ़ॉल्ट [-0.1,0.1]

आइए Experience.jsx में हमारे Duck को तैरा दें: