React Fiber – چرخش یک مکعب

در پست قبلی ، ما با موفقیت اولین مکعب خود را ارائه دادیم! (آن را در عمل مشاهده کنید)

حال ، بیایید حرکتی را اضافه کنیم و آن مکعب استاتیک را به یک شیء پویا تبدیل کنیم.

برای تازه کردن سریع در مورد چگونگی سه JS و سه فیبر می توانید این مقاله را دنبال کنید

ما از قلاب استفاده از React-Three/Fiber استفاده خواهیم کرد. این قلاب نقش مهمی در ایجاد انیمیشن ها ایفا می کند

نام

در useFrame هوک به عنوان یک آرگومان یک عملکرد پاسخ به تماس را می گیرد و درست قبل از هر حلقه انیمیشن آن را صدا می کند. عملکرد پاسخ به تماس دو آرگومان دریافت می کند state وت deltaبشر

• حالت – این شیئی است که اطلاعات زیادی را در مورد وضعیت فعلی ذخیره می کند ، حاوی اطلاعاتی مانند:
  1. ساعت – یک شی سه ساعت JS که زمان فعلی و زمان دلتا را به ما می گوید.
  2. دوربین – اشاره ای به دوربین فعال فعلی در صحنه.
  3. صحنه – اشاره ای به شیء صحنه ریشه.
  4. GL – ارجاع به متن ارائه WebGL.
  5. اندازه – یک شی با ارتفاع و عرض بوم.
  6. Viewport – یک شیء حاوی اندازه نمای در پیکسل ها.
• دلتا – این شماره زمان سپری شده پس از آخرین قاب در ثانیه را نشان می دهد. می توان از آن برای ایجاد انیمیشن های مستقل از قاب استفاده کرد ، به عنوان مثال: ما می توانیم مقدار دلتا را با تغییر مورد نظر در موقعیت یا چرخش ضرب کنیم تا اطمینان حاصل شود که نرخ فریم دستگاه چیست ، اشیاء در موقعیت صحیح قرار دارند.

در حالی که UseFrame برای انیمیشن ها قدرتمند است ، مهم است که از انجام محاسبات سنگین در عملکرد پاسخ به تماس جلوگیری کنید. این می تواند بر عملکرد تأثیر منفی بگذارد و باعث لکنت در انیمیشن شما شود.

چرخش مکعب

نظریه کافی ، بیایید وارد عمل شویم ، ما مرجع هندسه جعبه خود را ذخیره خواهیم کرد و در هر حلقه انیمیشن ، چرخش را با برخی از عوامل تغییر می دهیم.

import { useRef } from "react";

import { OrbitControls, Box } from "@react-three/drei";
import { Canvas, useFrame } from "@react-three/fiber";

//type
import type { Mesh } from "three";

const ROTATION_SPEED = 0.005;

function Cube() {
  const boxRef = useRef(null);

  useFrame(() => {
    if (boxRef.current) {
      boxRef.current.rotation.x += ROTATION_SPEED;
      boxRef.current.rotation.y += ROTATION_SPEED;
    }
  });

  return (
    
      
    
  );
}

export default function App() {
  return (
    
  );
}

به عنوان یک تمرین سرگرم کننده ، سعی کنید کره ای را ایجاد کنید که به طور مکرر به سمت بالا و پایین حرکت کند.