React Three Fiber 복기 2일차

React Three Fiber

 

React Three Fiber 와 주요 라이브러리 훅 정리

React Three Fiber는 React 에서 Three.js를 선언적으로 사용할 수 있게 해주는 강력한 라이브러리 입니다. 3D 웹 개발을 훨씬 쉽게 사용 할 수 있게 도와주는 라이브러리 입니다. 

 

React Three Fiber를 사용하며 자주 사용했던 요소들을 간략하게 정리했습니다.

 

@react-three/fiber 의 핵심 요소 

 

Canvas

<Canvas shadows camera={{position : [0,0,0]}}>

{/* 3D 요소들 */}

</Canvas>

 

- Three.js 씬을 렌더링 하는 컨테이너 

- 렌더러, 씬 , 카메라 등을 자동으로 설정 

- 모든 3D 요소의 부모 컴포넌트 역할 

 

ThreeEvent

const handleClick = (e:ThreeEvent<MouseEvent>) => {
e.stopPropagation();
// 3D 객체와 상호작용

}

 

- 3D 객체에 대한 이벤트 처리 (클릭, 드래그 등)

- DOM 이벤트와 유사하지만 , 3D 공간에서 작동

 

useFrame 

 

useFrame(()= > {

 mesh.current.rotation.y  += delta; 
 // 매 프레임마다 실행되는 코드
})

 

- 애니메이션 프레임마다 실행되는 훅,

- 지속적인 움직임, 회전 변형 등을 구현할 때 필수 

 

@react-three/drei 의 유용한 도구들

 

Environment 

 

<Environment preset="sunset" background />

 

- 환경 조명과 배경 설정 

- 사실적인 조명과 반사 효과를 쉽게 구현 

- 주요 프리셋 목록:
1. sunset : 따뜻한 햇빛이 비치는 일몰 장면 

2. dawn : 부드러운 새벽 조명 

3. night: 어두운 밤 분위기 

4. warehouse: 실내 창고 같은 분위기 

5. foreset : 숲속 환경 조명 

6. apartment: 실내 아파트 조명 

7. studio: 밝은 스튜디오 조명 

8. city: 도시 환경 조명 

9. park:공원 분위기 

10. lobby: 로비 같은 실내 공간 

각 프리셋은 고유한 조명 특성을 가지고 있어, 모델의 재질과 전체적인 씬 분위기에 큰 영향을 줍니다. 프로젝트의 분위기나 목적에 맞는 프리셋을 선택하시면 됩니다. 

 

 

OrbitControls 

 

<OrbitControls  enableZoom={true} maxPolarAngle={Math.PI / 2} />

 

 

- 마우스로 카메라 제어 (회전 , 확대/ 축소 , 이동)

- 인터랙티브한 3D 뷰어 구현에 필수 

(enableZoon : 확대 Boolean, maxPolarAngle  : 제한적인 각도 설정 )

그외에 내장된 기능들은 굉장히 많습니다.

https://threejs.org/docs/#examples/en/controls/OrbitControls

 

 

PerspectiveCamera 

 

<PerspectiveCamera makeDefault position={[0,2,5]} fov={75} />

 

- 시점 카메라 설정 

- 위치 , 각도 시야각 등을 React Props로 쉽게 제어 가능 

# 내가 PerspectiveCamera사용간 속성 

 

makeDefault
 역할: 이 카메라를 씬 기본 카메라로 설정 , 이 속성이 없으면 카메라가 정의되어 있어도 실제 렌더링에 사용되지 않을 수 있습니다. 

position
역할: 3D 공간에서 카메라의 위치를 [x,y,z] 좌표로 지정합니다. 

[0,2,5] 는 중앙에서 약간 (y = 2) 위, 그리고 뒤쪽으로 ( z = 5) 카메라를 배치 했었습니다.

fov(Field of View)

역할 : 카메라의 시야각을 도 단위로 설정합니다. 

값이 클수록 넓은 화각으로 더 많은 장면이 보이지만 왜곡이 생긴다. 값이 작을 수록 , 망원 렌즈처럼 좁은 영역을 확대해서 보여줍니다. 

 

그외에도 굉장히 많은 내장된 기능들이 많습니다. 

 

near: 카메라가 렌더링 하는 최소 거리 

far : 카메라가 렌더링하는 최대 거리 

zoom : 카메라 줌 레벨 

lookAt: 카메라가 바라보는 좌표점 => 실시간 통신을 받아가며 , 내가 React Three Fiber 로 구현한다면 동적으로 이동하는 뷰를 보여주기에 좋은 기능입니다. 

 

https://threejs.org/docs/?q=pers#api/en/cameras/PerspectiveCamera

three.js docs

 

 

⚡︎useGLTF⚡︎

 

const {scene , animations } = useGLTF('/model.glb');

 

- 3D 모델 파일 (GLTF / GLB )을 로드 

- 모델 뿐만 아니라 텍스처 , 애니메이션도 함께 불러옴

- 내가 원하고자 하는 모델 파일을 불러와서 객체 데이터 내용안에 보면 , 애니메이션 기능들이 포함되어 있으며 , 모델의 포지션값이 어떻게 되어져있는지 전부 체크가 가능하다. 

 

 

이 외에도 정말 다양한 기능들이 많으면 알면 알수록 더 좋은 기능들이 굉장히 많다. 내가 초기에 늘 자주 써왔던 기능들 기반으로 복기를 하고자 정리를 했습니다. 요즘 수많은 정보들을 통해서 많은 정보들을 접하지만 , 그만큼 복기를 하지 않으면 다 잊어버리고 듣긴 했는데 , 써봤는데 , 하지만 팀원과의 소통에 있어서 막힘이 생긴다면 문제가 되기에 복기를 통해 나만의 것을 만드는게 중요하다고 생각합니다 !