Mission으로 얻은 재료를 쌓아 보상을 받는 배민 sandwich program을, 3D 경험이 없던 web team이 Three.js와 React Three Fiber로 처음 개발하며 익힌 rendering 기초와 mobile 시행착오를 소개한다. 촉박한 일정과 device 제약 속에서 배운 실전 최적화·troubleshooting을 담담하게 정리한다.
핵심 포인트- mesh(geometry+material)와 scene·camera·renderer·light 관계를 익히고, 화면 크기가 달라도 sandwich와 2D UI 비율을 지키려 perspective 대신 orthographic camera를 선택
- overlay·canvas·background 세 layer로 2D UI와 3D scene을 분리하고, 3D를 따라야 하는 DOM은 R3F의 Html이 world→normalized→pixel 변환을 대신해 수동 계산 없이 두 공간을 연결
- 확대는 mesh scale 대신 camera zoom, camera가 맨 위 재료를 추적하게 하고, drag 회전은 조명 방향이 바뀌지 않도록 camera가 아닌 sandwich group을 회전
- 대량 낙하는 fade transition으로 단순화, frame 고정 값 대신 R3F frame hook의 delta time으로 30/60fps 속도 차를 보정, frustum culling으로 화면 밖 rendering을 줄이고, 일부 device에서 asset이 녹색으로 변하는 '슈렉 sandwich'는 material color factor와 미사용 PCF shadow map 조합이 원인임을 찾아 제거
왜 읽나처음 3D 웹을 다루는 프론트엔드 개발자에게, camera 선택·좌표 연결·animation·frame rate 보정부터 실기기 렌더링 버그 추적까지 이어지는 입문 실전기.