3D 인터랙티브 웹 개발 분야 이론 및 실습 강의 / 파트3

3D 물리엔진 자동차 웹

3D 개발 환경 구현

• 프로젝트 설명 (r3f, cannon)
• use-cannon 라이브러리 소개
• leva 라이브러리 소개
• 물리 엔진 기본 1편 (useBox, useShpere, useCylinder, usePlane )
• 물리 엔진 기본 2편 (useTrimesh, useConvexPolyhedron )

Cannon 활용 자동차 구현

• 물리 엔진을 가진 자동차의 바디 만들기 (useBox)
• 물리 엔진을 가진 바퀴 만들기 (useCompoundBody)
• 키보드를 통한 바퀴 제어 로직 만들기
• 물리엔진 Static, Kinematic, Dynamic 이해하기
• useBox, useSphere로 충돌체 만들기 구체, 박스 (Dynamic)
• 벽과 고정체 만들기 (Static)
• 자동차를 따라다니는 카메라 만들기 (useThree)

3D 오브젝트 실제 모델 적용하기

• gltfjsx로 소개 및 glb 파일을 jsx로 변환하기
• 자동차 바디 glb 모델로 적용하기
• 자동차 바퀴 glb 모델로 적용하기
• 충돌 모델 glb 모델로 적용하기
• Text 3D 모델 넣기

이벤트 및 모션 만들기

• recoil 전역값 관리 학습
• 페이지 진입시 인 모션 만들기
• 물체 충돌 UI 팝업 생성
• 물체 충돌시 물체 회전 (간판 회전)
• 물체 마우스 클릭시 페이지 이동
• 특정 지역 진입시 이벤트 발생
• 특정 지역 진입시 이벤트2 발생

프로젝트 최적화 알아보기

• FPS 개념과 확인(stats)
• 최적화 알아보기 (DrawCall)
• Json 폰트 최적화
• Webp로 텍스처 압축
• 모델 최적화 (glb, Draco 압축)

[완성본 링크] - (https://mr-chu-car-web.netlify.app/)