클릭 한 번으로 조립되는 3D 정육면체 전개도 시뮬레이터 만들기
Three.js를 활용해 3D 공간을 다루다 보면, 특정 축을 기준으로 객체를 회전시키는 '피벗(Pivot)' 설정에서 어려움을 겪는 경우가 많습니다.
오늘은 클릭과 드래그 상호작용을 통해 정육면체 전개도를 부드럽게 펼치고 조립하는 3D 시뮬레이터를 만드는 방법과, 이를 구현하기 위한 프롬프트 구조를 공유하려고 합니다. Three.js의 계층 구조(Group)와 회전 로직을 이해하는 데 아주 좋은 예제가 될 것입니다.
1. 프로젝트 개요 및 목표
사용자의 상호작용(클릭 및 드래그)에 반응하여, 평면 형태의 정육면체 전개도가 3D 공간에서 입체로 조립되거나 다시 펼쳐지는 시뮬레이션을 구현합니다.
2. 사용된 기술 스택 (Mandatory Requirements)
복잡한 빌드 과정 없이 바로 실행해 볼 수 있도록 구성했습니다.
환경: 단일
index.html파일로 구성3D 라이브러리: Three.js (CDN 사용)
스타일링: Tailwind CSS (CDN 사용)
애니메이션:
requestAnimationFrame과THREE.MathUtils.lerp를 활용하여 끊김 없이 부드러운 전환 구현Factor 0: 완전히 펼쳐진 전개도 상태
Factor 1: 완전히 조립된 정육면체 상태
3. 3D 모델 및 지오메트리 기본 설정
먼저 3D 공간의 중심(원점)을 기준으로 6개의 면을 생성합니다.
크기 기준: 면의 길이(
SIZE)는2로 설정합니다.면 생성: 6개의
THREE.PlaneGeometry(크기: 2 x 2)를 사용합니다.시각적 구별: 각 면에 1부터 6까지 숫자를 텍스처로 입히고, 고유한 색상을 지정해 조립 과정을 직관적으로 확인할 수 있게 합니다.
중심점: 조립이 완료된 정육면체의 중심은 3D 공간의 원점
(0, 0, 0)이 되도록 설계합니다.
4. 핵심 로직: 전개도 구조 및 회전 피벗 설정 🔥
이번 프로젝트에서 가장 중요하고 까다로운 부분입니다. 면이 접히려면 각 면의 '모서리'가 회전축(Pivot)이 되어야 합니다. 이를 위해 THREE.Group을 회전축으로 삼고, 그 안에 THREE.Mesh(면)를 배치하는 계층 구조를 사용합니다.
중앙에 있는 1번 면(Face 1)을 기준으로 나머지 면들이 어떻게 연결되고 접히는지 아래 표로 정리했습니다. (기준: halfSize = SIZE / 2)
| 면 번호 | 역할 | 피벗(Group) 위치 (Face 1 기준) | 메시(Face) 위치 (피벗 기준) | 회전축 | 조립 각도 (Factor=1) |
| 1 | 중앙 (Front) | (0, 0, 0) | (0, 0, 0) | - | - |
| 2 | 오른쪽 (Right) | (+halfSize, 0, 0) | (+halfSize, 0, 0) | Y축 | -Math.PI / 2 |
| 3 | 왼쪽 (Left) | (-halfSize, 0, 0) | (-halfSize, 0, 0) | Y축 | +Math.PI / 2 |
| 4 | 윗면 (Top) | (0, +halfSize, 0) | (0, +halfSize, 0) | X축 | +Math.PI / 2 |
| 5 | 아랫면 (Bottom) | (0, -halfSize, 0) | (0, -halfSize, 0) | X축 | -Math.PI / 2 |
| 6 | 뒷면 (Back) | Face 4 내 (0, +SIZE, 0) | (0, +halfSize, 0) | X축 | +Math.PI / 2 |
📌 6번 면(뒷면) 처리 특이사항
6번 면은 1번 면이 아닌 4번 면(윗면)에 꼬리를 물고 연결되어야 합니다.
부모 설정:
cubeGroups.back(6번 피벗)은cubeGroups.top(4번 피벗)의 자식으로 연결됩니다.피벗 위치:
position.set(0, SIZE, 0)를 통해 4번 면의 상단 모서리에 정확히 피벗을 맞춥니다.메시 배치:
position.set(0, halfSize, 0)를 주어 피벗으로부터 6번 면의 중심을 올바르게 밀어내어 배치합니다.
5. 상호작용(Interaction) 및 UI
사용자가 3D 모델을 마음껏 만져볼 수 있도록 이벤트를 추가합니다.
클릭 (토글):
window.addEventListener('click')을 사용해 클릭할 때마다 전개도가 조립되거나 다시 펼쳐지는 애니메이션을 실행합니다.드래그 (화면 회전):
mousedown,mousemove,mouseup이벤트를 조합하여cubeGroups.center전체를 회전시킵니다. 마치 카메라가 정육면체 주위를 도는 듯한 3D 뷰 탐색 효과를 줍니다.UI 요소: 화면 상단(Tailwind CSS 활용)에 현재 상태(조립됨/펼쳐짐)와 "드래그하여 회전해보세요" 같은 안내 메시지를 직관적으로 표시합니다.
Three.js에서 3D 객체의 로컬 좌표(Local Space)와 월드 좌표(World Space)를 이해하는 데 이 정육면체 시뮬레이터만큼 좋은 예제는 없는 것 같습니다.
