1. 튜토리얼 소개

3D 크리스마스 트리는 molecularmmeng020425가 2025년 11월에 출시한 혁신적인 프로젝트입니다. 몰입감 넘치고 영화 같은 시각적 경험을 선사합니다. React와 Three.js(R3F)를 기반으로 구축된 이 프로젝트는 고급 AI 제스처 인식 기술을 활용하여 사용자가 크리스마스 트리의 모양을 쉽게 제어(집계 및 분산)하고 제스처를 사용하여 시점을 자유롭게 회전할 수 있도록 합니다. 단순한 크리스마스 트리가 아닌, 추억으로 가득한 인터랙티브 디지털 아트 갤러리입니다. 수천 개의 정교한 입자 효과, 눈부신 조명 쇼, 그리고 매달린 소중한 폴라로이드 사진들이 어우러져 고급스럽고 생동감 넘치는 가상 크리스마스 트리를 만들어내며, 사용자에게 전례 없는 감각적 경험을 선사합니다.

이 튜토리얼에서는 CPU를 리소스로 사용합니다.

2. 프로젝트 예시

3. 작업 단계

1. 컨테이너 시작 후 API 주소를 클릭하여 웹 인터페이스로 진입합니다.

2. 사용 단계

1. 사진 준비하기

프로젝트 디렉토리에서 `/openbayes/home/christmas-tree/public/photos/` 폴더를 찾으세요. 상단/커버 이미지의 경우 `top.jpg`로 이름을 지정하세요(트리 맨 위의 3D 오각형 별에 나타납니다). 나무 줄기 사진의 경우 1.jpg, 2.jpg, 3.jpg 등으로 이름을 지정하세요. 권장 사항: 정사각형 또는 4:3 종횡비 이미지를 사용하고 파일 크기를 작게 유지하세요(부드러운 재생을 위해 이미지당 500kb 미만이 이상적입니다).

2. 사진을 교체하세요

사진을 /openbayes/home/christmas-tree/public/photos 폴더에 복사하여 기존 이미지를 덮어쓰세요. 파일 이름 형식은 변경하지 마세요(1.jpg, 2.jpg 등). 

3. 사진 개수 조절 (증가 또는 감소)

사진을 더 추가하려면(예: 기본값 31개에서 100개로 늘리는 경우) dependencies.sh 파일을 열어야 합니다. export VITE_TOTAL_PHOTOS=31이라는 메시지가 표시됩니다. 숫자 "31"을 원하는 이미지 개수로 변경한 후 컨테이너를 닫고 다시 시작하세요. 

4. 제스처 제어 지침

이 프로젝트에는 AI 제스처 인식 시스템이 내장되어 있습니다. 작동하려면 카메라 앞에 서세요(화면 오른쪽 하단에 DEBUG 버튼이 있어 카메라 영상을 볼 수 있습니다).

🖐 손바닥이 흩어짐: 크리스마스 트리가 입자와 사진의 샤워로 폭발합니다.

✊ 주먹을 꽉 쥐고 (주먹을 꽉 쥐고) 조립하세요. 모든 요소가 완벽한 크리스마스 트리로 즉시 결합됩니다.

👋 손바닥을 좌우로 움직여 화면을 회전하세요. 손을 왼쪽으로 움직이면 나무가 왼쪽으로 돌고, 손을 오른쪽으로 움직이면 나무가 오른쪽으로 돌립니다.