피드로 돌아가기
Dev.toFrontend
원문 읽기
Three.js 기반 3D 좌표계 변환 및 동적 환경 제어 시스템 구현
Building a 3D Game in the Browser Humbled Me. Here's Everything That Fought Back.
AI 요약
Context
2D 브라우저 게임의 단순한 뷰포트 오프셋 방식을 넘어선 3D 공간의 복잡성 해결 필요. 좌표계 간의 변환, 회전 순서의 비가환성, 가변 프레임워크 환경에서의 정밀한 애니메이션 제어가 핵심 과제로 작용.
Technical Solution
- World Space, View Space, Local Space로 구분된 다중 좌표계 설계 및 객체 충돌 판정을 위한 Local Space 변환 로직 구현
- 3D 회전의 순서 의존성 문제를 고려한 정밀한 Rotation Order 제어
- Spherical Coordinates(yaw, pitch, distance)를 Cartesian(x, y, z)으로 변환하는 삼각함수 기반의 3인칭 Orbit Camera 시스템 구축
dawnAmount라는 단일 Float 변수를 State로 정의하여 Sky Color, Sun Position, Fog 등 전체 환경 렌더링을 동기화하는 단일 상태 제어 구조 채택- 기기별 하드웨어 성능 차이로 인한 실행 속도 불일치 해결을 위한 Delta-time scaling 적용
- Depth-buffer render pass를 통한 그림자 구현 및 Material 속성(Roughness, Metalness) 기반의 광원 상호작용 최적화
실천 포인트
- 3D 충돌 판정 시 월드 좌표가 아닌 대상 객체의 Local Space로 좌표를 변환하여 계산하는 방식 검토 - 3D 회전 구현 시 연산 순서(Rotation Order)가 결과값에 미치는 영향을 사전에 정의 - 프레임 기반 애니메이션 대신 Delta-time을 활용하여 기기 독립적인 실행 속도 보장 - 복잡한 환경 변화를 제어할 때 여러 변수 대신 단일 정규화된 값(
0.0 ~
1.0)을 통한 상태 동기화 구조 적용