Three.js를 사용한 PBR 장면 및 FPS 제어 구현 튜토리얼

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

- 초보자 및 창의적인 개발자

- Three.js 기본 개념 학습이 필요한 사람들

- 난이도: 기초 수준 (빌드 도구 없이 브라우저에서 실행)

핵심 요약

• PBR(PBR) 효과를 위한 Image-Based Lighting(IBL) 구현
• THREE.PMREMGenerator를 사용해 HDR 텍스처를 실시간 반사에 적용
• FPS 스타일 카메라 제어 구현
• pointerLock과 WASD 키보드 입력을 통한 이동 및 시야 제어
• 표준 재질(MeshStandardMaterial) 사용
• roughness 및 metalness 속성을 통해 물리 기반 렌더링 적용

섹션별 세부 요약

1. 프로젝트 설정 및 구조

• THREE.Scene, THREE.PerspectiveCamera, THREE.WebGLRenderer 객체 생성
• 브라우저에서 직접 실행 가능한 최소한의 Three.js 프로젝트 구성
• innerWidth/innerHeight 기반으로 렌더러 크기 조정

2. 환경 맵 및 IBL 적용

• THREE.PMREMGenerator를 사용해 HDR 텍스처를 equirectangular 형식으로 변환
• scene.environment 및 scene.background에 생성된 텍스처 할당
• 텍스처 변경 시 실시간 반사 효과 업데이트

3. 조명 및 그림자 설정

• AmbientLight와 DirectionalLight를 사용해 조명 추가
• shadowMap.enabled = true 및 PCFSoftShadowMap으로 그림자 품질 향상
• dir.shadow.mapSize.set(512, 512)로 그림자 맵 크기 조정

4. PBR 지면 및 큐브 생성

• MeshStandardMaterial을 사용한 반사 지면(PlaneGeometry) 생성
• roughness: 0.2, metalness: 0.6 속성으로 물리 기반 재질 적용
• BoxGeometry 큐브 생성 및 castShadow = true로 그림자 생성

5. FPS 카메라 제어 구현

• pointerLock 기능으로 마우스 잠금 및 mousemove 이벤트 처리
• WASD 키보드 입력을 기반으로 카메라 이동 벡터 계산
• camera.rotation.set(pitch, yaw, 0, 'YXZ')로 카메라 회전 적용

6. 애니메이션 루프 및 큐브 회전

• requestAnimationFrame을 사용한 애니메이션 루프 구현
• cubes.forEach(c => { c.rotation.x += 0.01; c.rotation.y += 0.01; })로 큐브 회전
• 창 크기 조정 시 camera.aspect 및 renderer.setSize 업데이트

결론

• PBR 효과를 위해 THREE.PMREMGenerator 사용을 권장
• 그림자 품질 향상을 위해 PCFSoftShadowMap 설정 필수
• FPS 제어를 위해 pointerLock과 mousemove 이벤트 활용
• 전체 소스 코드는 GitHub에서 확인 가능