Animasi adalah kunci untuk menghidupkan skena 3D Anda. Mereka dapat dipicu oleh interaksi pengguna, berbasis gulir atau waktu dan diterapkan pada objek 3D, cahaya, dan kamera.

Menguasai animasi adalah keterampilan kunci untuk menciptakan pengalaman imersif. Semakin banyak teknik yang Anda ketahui, semakin banyak Anda dapat mengekspresikan kreativitas Anda.

Catatan: Animasi model 3D dibahas dalam bab model.

Lerp

Lerp adalah fungsi matematika yang menginterpolasi antara dua nilai. Ini berguna untuk menganimasi sebuah nilai dari satu titik ke titik lain.

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

Parameter pertama adalah nilai awal, parameter kedua adalah nilai akhir, dan parameter ketiga adalah faktor interpolasi antara 0 dan 1.

Semakin dekat faktor interpolasi ke 0, semakin lambat animasi. Semakin dekat faktor interpolasi ke 1, semakin cepat animasi akan mencapai nilai akhir atau target.

Mari kita eksperimenkan pada komponen AnimatedBox dari paket pemula.

Komponen memiliki array boxPositions yang berisi posisi dari kotak pada berbagai waktu. Mari tambahkan hook useFrame untuk memperbarui posisi dari kotak berdasarkan waktu:

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;
  });
  // ...
};

Di sini kotak kita tidak dianimasikan. Ia berpindah dari satu posisi ke posisi lain. Mari gunakan fungsi lerp untuk menganimasikannya:

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
    );
  });
  // ...
};

Sekarang kotak dianimasikan. Itu bergerak dengan mulus dari satu posisi ke posisi lain.

Kelas Vector3 memiliki metode lerp yang dapat digunakan sebagai pengganti fungsi 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);

Banyak baris yang tersimpan untuk hasil yang sama!

Jangan ragu untuk bermain dengan waktu dan menglerp pada properti lain seperti rotation atau scale untuk mencoba efek yang berbeda.

Float

Float adalah sebuah wrapper component dari Drei library untuk memberikan kesan bahwa sebuah objek melayang.

Komponen ini memiliki beberapa props sebagai berikut:

• speed: Kecepatan animasi, nilai defaultnya adalah 1
• rotationIntensity: Intensitas rotasi XYZ, nilai defaultnya adalah 1
• floatIntensity: Intensitas naik/turun melayang, bekerja seperti pengali dengan floatingRange, nilai defaultnya adalah 1
• floatingRange: Rentang nilai sumbu y di mana objek akan melayang, nilai defaultnya adalah [-0.1,0.1]

Mari kita buat Duck kita melayang di Experience.jsx: