[Week 6] 지수

[jisooooooooooo]

📝 학습 내용 요약

3D 캐릭터 로드 및 환경 세팅

• useGLTF를 사용해 3D 캐릭터 모델을 로드했어요.
• 조명 없이 모델을 렌더링하면 실루엣만 보이기 때문에 DirectionalLight, AmbientLight를 추가해 정상적으로 보이도록 구현했어요.

조명 디버깅을 위한 Helper 추가

• 빛의 방향을 시각적으로 확인하기 위해 DirectionalLightHelper를 적용했어요.
• DirectionalLightHelper는 light.target의 방향을 따라가기 때문에 target을 업데이트해야 제대로 된 방향이 표시돼요.
• 보이지 않는 방향광을 눈으로 확인할 수 있어서 조명 세팅에 확실히 도움이 되는 것 같아요.

THREE.Vector3

• 3차원 벡터를 표현하는 클래스로 3D 위치, 방향, 속도 등을 표현하는 객체에요.
• 단순 연산뿐 아니라 normalize, cross, dot 과 같은 연산으로 방향이나 회전에도 쓰여서 활용도가 높아요.

바닥 텍스처

• TextureLoader로 로드 후에 wrapS/wrapT=RepeatWrapping, repeat.set(...) 등을 조정해 타일링했어요.

애니메이션 제어

• AnimationMixer를 사용해 캐릭터 애니메이션을 관리할 수 있어요.
• AnimationMixer는 clock.getDelta()나 performance.now() 기반의 delta를 mixer.update(delta)에 넘겨와 프레임 독립적으로 동작해요.
• 애니메이션 재생, 정지, 속도 조절 등 상태 제어가 가능하고 여러 애니메이션을 동시에 다룰 수도 있어요.

3D 좌표 변환

• useThree에서 가져온 raycaster, camera, gl을 활용해요.
• 마우스 이벤트 좌표를 canvas 기준에서 WebGL NDC 좌표로 변환하고 raycaster로 바닥과 교차점을 계산해 클릭 위치를 3D 좌표로 변환해요.

시간 관리

• performance.now()로 애니메이션에서 정밀한 시간 계산이 가능해요.
• Date.now()와 다르게 페이지 로드 기준의 경과 시간을 제공해 애니메이션 처리에 적합한 것 같아요.

2025-12-09.6.43.40.1.mov

📁 실습 파일 설명

• WebGL을 활용한 웹 게임 만들기

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

• 마우스 인터랙션이 들어가면서 코드도 그렇고 내용이 어려워져서 이해하는데 시간이 더 걸렸던 것 같아요🥲
• 내용 자체는 어렵긴 한데 캐릭터 로드하는 것부터 점프나 조명 조절까지 해가면서 실습을 진행하니까 재미도 있었고 이번에는 캐릭터 모델 하나만 가지고 실습을 진행했는데 여러 캐릭터들이 같이 있을 때 조작을 어떻게 하면 좋을지, 바닥 외에 다른 배경을 바꿔보면 어떨지 등등 다양한 실습도 해보고 싶습니당!

2025-12-09.7.25.30.mov