잠시만 기다려 주세요.
useFrame 훅은 렌더링 프레임마다 실행될 로직을 정의하며, 주로 애니메이션 구현에 활용됩니다. 🔄state 객체로 R3F 환경의 다양한 정보를 제공하고, 두 번째 인자는 delta로 이전 프레임 이후 경과 시간을 밀리초 단위로 나타냅니다. ⏱️useFrame 훅은 여러 번 사용할 수 있으며, 기본적으로 호출 순서대로 실행되지만, 두 번째 인자로 우선순위(낮은 숫자일수록 먼저 실행)를 지정하여 실행 순서를 제어할 수 있습니다. 🔢state 객체를 통해 렌더링 영역의 픽셀 크기(size), 3D 렌더링 영역 정보(viewport), 현재 장면(scene), 렌더러(renderer), 카메라(camera), 마우스 커서 위치(mouse), 경과 시간(clock) 등 풍부한 정보를 얻을 수 있습니다. 💡frameloop 속성은 렌더링 루프 방식을 제어하며, always(항상 자동 렌더링)와 demand(수동 렌더링, invalidate() 함수로 트리거 가능) 모드가 있습니다. ⚙️state.controls를 통해 카메라 컨트롤 객체(예: OrbitControls)에 접근하려면 해당 컨트롤 컴포넌트에 makeDefault 속성을 지정해야 합니다. 🎮state.raycaster 객체를 활용하여 마우스 커서 아래에 있는 메시를 감지하고 상호작용하는 기능을 구현할 수 있습니다. 🎯state.flat 값은 최종 렌더링 결과 이미지의 색상 보정 여부를 나타내며, true는 보정 없음, false는 더 나은 색상 표현을 위한 보정을 의미합니다. 🎨useFrame 콜백 함수 내에서 과도한 콘솔 로그는 웹 브라우저 성능 저하를 유발할 수 있으므로 주의해야 합니다. ⚠️Recommanded Videos
2025. 11. 14.
2024. 8. 25.
2025. 4. 18.
2025. 7. 5.
2025. 12. 28.
2024. 5. 29.