[Bounds]

Bounds 컴포넌트

3D 객체 기반으로 한 Bounding box 를 생성하고 관리하는데 사용
children 은 가상 공간인 bounding box 안에서 관리됨

Bounds 컴포넌트의 요소들

• fit
  주어진 객체나 경계 상자에 맞게 조정됨
  children 의 mesh 들 포지션들의 중앙점을 기준으로 카메라를 잡음
  이 중심점은 자식 mesh 들의 위치에 기반한 전체 Bounding box 의 중앙 좌표임
  처음 렌더링 시 초기 뷰 설정 시 사용
  ※ camera controls 의 makeDefault 속성이 true 여야 정상 동작
  Bounds 에서 카메라의 위치를 fit 에 맞게 설정해주는데
  사용자 설정된 값이 있으면 Bounds 의 카메라 위치 설정 후 사용자 설정된 값이 적용되어 원하는 동작이 안나옴

• clip
  카메라의 근원과 원거리 설정
  view 의 clipping 영역을 제어
  특정 거리이상 또는 미만의 객체들을 렌더링에서 제외시킬 수 있음 (성능 최적화)

• observe
  창의 크기가 변경될때마다 Bounding box 다시 계산하여 렌더링 해줌
  fit 과 함께 사용하기

• onFit
  fit 이 완료되면 호출되는 콜백 함수

• damping
  애니메이션 움직임 조절

• margin
  Bounding box 주변의 여백 설정

Bounds 컴포넌트안에서 불러오는 useBounds 훅
현재 Bounding box의 상태를 가져오고, Bounding box 를 조절하거나 업데이트하는데 사용

• refresh
  인자로 받은 3D 객체로 refresh 시켰을 때 Bounding box 가 최신으로 유지 됨
  bounds.refresh(ref.current).clip().fit() 과 같이 선언 시
  ref.current 의 clip 과 fit 에 맞게 부드러운 애니메이션과 함께 Bounding box 가 해당 ref.current 의 크기에 맞게 조정됨
  e.g. 지도 위에 건물 3개가 있다하면 각 건물(mesh) 클릭 시 refresh 인자로 넘겨주면
  Bounding Box 가 클릭된 건물의 크기에 맞게 조정되고 카메라는 조정된 Bounding Box 를 바라봄

import { useBounds } from "@react-three/drei";

...
const bounds = useBounds();
// e 에는 클릭된 mesh 정보가 담겨있음
<group onClick={(e) => bounds.refresh(e.object).clip().fit()}>

• getSize
  현재 Bounding box 의 크기

• fit
  위와 동일

• clip
  위와 동일