[Week6] 윤하

[twossu]

📝 학습 내용 요약

• three, @react-three/fiber, @react-three/drei, gsap 패키지를 설치해 3D 웹을 구현할 수 있습니다.
• <OrthographicCamera>를 사용하여 원근감이 없는 쿼터뷰 시점을 설정하고 <OrbitControls>를 통해 줌 인/아웃 및 각도 조절 기능을 설정할 수 있습니다.
• requestAnimationFrame을 사용해 자연스러운 점프 로직과 착지 이펙트를 구현했습니다.

📁 실습 파일 설명

Player.tsx

• useGLTF를 통해 3D 캐릭터 모델을 불러와 <primitive> 컴포넌트로 렌더링했습니다.
• useCallback을 사용하여 렌더링 시마다 그림자 및 애니메이션 설정이 초기화되지 않도록 최적화 적용했습니다.
• useFrame 훅을 사용하여 매 프레임마다 AnimationMixer를 업데이트해 캐릭터의 움직임을 구현했습니다. (시작, 정지, 루프, 한번재생등 가양한 기능을 제공)

Light.tsx

• <ambientLight>태그로 공간 전체에 부드럽게 퍼지는 기본 조명을 intensity로 조절했습니다.
• <directionalLight> 광원의 위치(position)와 강도를 설정하고 castShadow를 통해 그림자 생성했습니다. DirectionalLightHelper로 조명을 제어할 수 있습니다.

CameraController.tsx

• 카메라의 위치 및 각도를 조정하는 역할을 합니다.

Floor.tsx

• <planeGeometry>로 바닥의 크기와 rotation-x를 적용해 수평으로 배치했습니다.
• <mesh>에 receiveShadow 속성으로 Player 객체에서 생성되는 그림자가 바닥에 그려지도록 구현했습니다.

usePlayerJump.ts

• requestAnimationFrame과 Math.sin 함수를 활용하여 자연스러운 포물선 형태의 점프 움직임을 구현했습니다.

🌟 느낀 점 및 피드백 요청 사항

• 실습책에는 React.FC를 사용하던데 전에 이 React.FC 사용을 지양해야한다고해서 이번코드에서도 사용하지 않았는데요. 왜 사용하면 안되는지에 대한 이유가 기억이 나지 않아 인터넷에 찾아보니 Reac.FC가 children을 암시적으로 포함하는 등 타입 안정성을 떨어뜨릴 수 있기에 Props 타입을 명시적으로 지정하는 방식이 더 안전하다는 것을 알 수 있었습니다.
• 합세를 하면서 모든 최적화하면 좋을줄알고 useCallback을 남발했었는데 코드리뷰로 무분별한 최적화는 더 성능이 저하된다는 댓글을 받게되었는데 실습책에서도 관련된 내용이 작성되어 있어 다시한번 짚어넘어가는 계기가 되었습니다.

• 그냥 단순 궁금증으로 웹에서 게임할 수 있는 슈게임같은 게임은 어떤 기술로 만드는지 궁금해서 찾아봤는데 Adobe Flash를 사용했다고하네요.! ! ! 저는 왜 사람들이 플래쉬게임이라 하는지 몰랐는데 어도비 플래쉬때문에 그렇게 불러지는 것을 알게되었습니다. 충격~!