정육면체 조립 시뮬레이터 (3D Cube Net Assembler) 프롬프트

1. 개요 및 목표

사용자 상호작용(클릭 및 드래그)을 통해 정육면체 전개도를 3D 공간에서 부드럽게 펼치고 조립하는 시뮬레이션 웹 애플리케이션을 생성합니다.

2. 기술 스택 (Mandatory Requirements)

• 파일: 단일 index.html 파일로 구성

• 3D 라이브러리: Three.js (CDN 사용)

• 스타일링: Tailwind CSS (CDN 사용)

• 애니메이션: requestAnimationFrame과 THREE.MathUtils.lerp를 사용한 부드러운 전환 구현 (Factor 0: 전개, Factor 1: 조립)

3. 3D 모델 및 지오메트리 설정

• 크기: const SIZE = 2; (면의 길이 2)를 기준으로 설정합니다.

• 면 개수: 6개의 THREE.PlaneGeometry (크기: SIZE x SIZE)를 생성합니다.

• 텍스트/색상: 각 면에 1부터 6까지 숫자를 텍스처로 표시하고, 면마다 고유한 색상을 지정하여 시각적으로 구별합니다.

• 중심: 조립된 정육면체의 중심은 3D 공간의 원점 (0, 0, 0)이 되도록 설계합니다.

4. 전개도 구조 및 회전 로직 (Critical Pivoting)

가장 중요한 부분은 회전축(THREE.Group)과 메시(THREE.Mesh)의 위치 설정입니다. 각 면은 Face 1을 기준으로 연결됩니다.

면 번호	역할	피벗 (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번 면):

• cubeGroups.back (6번 피벗)은 cubeGroups.top (4번 피벗)에 연결됩니다.

• cubeGroups.back.position.set(0, SIZE, 0);는 4번 면의 상단 모서리에 정확히 맞춥니다.

• face6.position.set(0, halfSize, 0);는 피벗으로부터 6번 면의 중심을 올바르게 배치합니다.

5. 상호작용 및 UI

• 클릭: window.addEventListener('click')을 사용하여 조립/전개 상태를 토글합니다.

• 드래그: mousedown, mousemove, mouseup 이벤트를 사용하여 cubeGroups.center를 회전(카메라 이동 효과)시켜 3D 뷰를 탐색합니다.

• UI: 상단에 현재 상태와 드래그 안내 메시지를 표시합니다.