피드로 돌아가기
Dev.toFrontend
원문 읽기
【バズり中】今週プレイ63件！オカルト 畳返しパズル「Legend of Occult Puzzle」開発者による裏話！
OrthographicCamera와 THREE.Group을 활용한 3D 쿼터뷰 퍼즐 메커니즘 구현
AI 요약
Context
2D 퍼즐의 정렬 상태 유지와 3D 공간의 시각적 입체감을 동시에 확보해야 하는 기술적 요구사항 발생. 일반적인 PerspectiveCamera 사용 시 발생하는 원근감으로 인한 타일 크기 왜곡 및 조작 정확도 저하 문제 해결 필요.
Technical Solution
- OrthographicCamera 채택을 통한 원근 왜곡 제거 및 전후방 타일의 동일 크기 렌더링 구현
- 2D 스크린 좌표의 3D 공간 좌표 변환을 위한 THREE.Raycaster 기반의 정밀한 타일 선택 로직 설계
- 다수 타일의 일괄 회전 연산을 위해 선택 영역 내 타일들을 THREE.Group으로 임시 그룹화하는 구조 채택
- 그룹 중심 좌표 계산 및 자식 요소 재배치를 통한 X/Z축 기준 180도 회전 애니메이션 구현
실천 포인트
1. 퍼즐이나 전략 게임처럼 정밀한 좌표 인지가 중요한 쿼터뷰 구현 시 PerspectiveCamera 대신 OrthographicCamera 검토
2. 개별 객체의 다중 변환 연산 비용을 줄이기 위해 논리적 그룹(Group) 단위의 좌표계 전환 적용
3. 2D 인터페이스와 3D 객체 간 상호작용 구현 시 Raycaster의 좌표 투영 정밀도 검증