인터랙티브 복셀 나이트 모닥불 장면

당신은 시니어 크리에이티브 WebGL 및 Three.js 개발자입니다. Three.js + webgl을 사용해 완전한 프로덕션 수준의 인터랙티브 3D 장면을 단일 독립 실행형 HTML 파일(index.html) 안에 모두 구현하세요 ### 1. 비주얼 테마 및 아트 디렉션 - 분위기: 깊은 밤의 숲, 아늑하게 빛나는 모닥불, 캠프에서 쉬고 있는 지치고 고독한 나이트(Dark Souls의 화톳불 / 클래식 레트로 RPG 미학). - 미학: 3D 픽셀 아트 / 복셀 / 로우폴리 스타일. - 셰이딩 및 포스트 프로세싱: Three.js 포스트 프로세싱(RenderPixelatedPass 또는 이에 준하는 저해상도 픽셀화/디더링 효과)을 적용해 진정성 있는 16비트/32비트 레트로 분위기를 구현하세요. ### 2. 장면 지오메트리 및 에셋(100% 절차적 생성 — 외부 .gltf/.obj 파일 사용 금지) 모든 에셋은 Three.js 지오메트리 프리미티브(BoxGeometry, CylinderGeometry 등)와 기본 머티리얼을 사용해 절차적으로 구성해야 하며, CORS 문제 없이 로컬에서 파일이 실행되어야 합니다. 1. 숲 환경: - 지면: 절차적으로 생성한 복셀 돌, 버섯, 로우폴리 식생이 있는 어둡고 스타일화된 지형. - 나무: 깊이감과 고립된 분위기를 만들 수 있도록 공터 주변을 둘러싼 절차적 소나무/가문비나무 또는 블록형 수관 나무. - 하늘 및 조명: 깜빡이는 복셀 별이 있는 깊은 자정의 하늘과 부드러운 그림자를 드리우는 차가운 달빛 DirectionalLight. - 깊이감: 어두운 분위기의 색상과 THREE.FogExp2를 사용해 지평선을 자연스럽게 섞으세요. 2. 모닥불: - 타다 남은 장작과 절차적으로 생성한 불씨를 둘러싼 돌 원형 배치. - 불 시스템: 위로 솟아오르는 애니메이션 픽셀 파티클(Points 또는 맥동하는 복셀 메시). - 동적 조명: Math.sin, 노이즈 또는 의사 난수 변화를 사용해 지속적이고 자연스럽게 깜빡이는 따뜻한 주황-빨강 PointLight. 3. 나이트: - 복셀화된 프리미티브로 머리, 몸통, 상·하박, 다리, 망토, 검 그룹을 구성한 계층형 씬 그래프. - 시각적 디테일: 슬롯형 헬멧, 흉갑, 숄더 아머, 건틀릿, 검집/검. - 깔끔한 절차적 회전 애니메이션을 위해 관절(어깨, 팔꿈치, 골반, 무릎)의 피벗 위치를 정확히 정렬하세요. ### 3. 인터랙티브 나이트 상태 머신 선택 가능한 다음 상태를 렌더 루프 안에서 선형 보간(lerp) 또는 삼각 함수 곡선을 사용해 부드러운 절차적 애니메이션으로 구현하세요. - 불가에서 앉기(기본 대기): 다리를 꼬거나 웅크리고 앉아 미세한 호흡 동작을 하며 불길 가까이에서 손을 녹입니다. - 장작 추가: 나이트가 일어나 장작을 가져와 불에 던집니다. 불길이 눈에 띄게 커지고, 잠시 빛의 반경이 넓어지며, 불꽃이 한 번 크게 튑니다. - 검술 연습: 일어나 검을 뽑고 깔끔한 3단 공격/패리 동작을 수행한 뒤 전투 경계 자세로 돌아갑니다. - 먼 곳 바라보기: 공터 가장자리까지 걸어가 검을 땅에 꽂고, 망토가 흔들리는 가운데 어둠 너머를 바라봅니다. - 잠자기: 불 옆 침낭에 눕고, 헬멧에서 움직이는 픽셀 「Z z z」 파티클이 떠오릅니다. - 고기 굽기: 불꽃 위에서 음식이 끼워진 막대기를 들고, 은은한 절차적 연기/수증기 파티클을 발생시킵니다. ### 4. 카메라 시스템 위치와 타깃을 부드럽게 보간(lerp)해 전환하는 카메라 프리셋을 제공하세요. - 아늑한 클로즈업: 나이트와 모닥불 빛에 초점을 맞춘 미디엄 샷. - 아이소메트릭 RPG: 공터를 높은 45도 각도에서 내려다보는 클래식 전술 시점. - 시네마틱 지면 시점: 별이 빛나는 하늘과 소나무 수관을 배경으로 나이트를 올려다보는 낮은 앵글의 극적인 샷. - 자유 궤도: 인터랙티브하게 장면을 살펴볼 수 있도록 기본 OrbitControls로 매끄럽게 전환. ### 5. UI 및 오디오 - UI 스타일: 반투명한 어두운 프레임, 픽셀 스타일 테두리, 임베드한 Google Font(예: 'Press Start 2P')를 사용하는 레트로 8비트/16비트 RPG HUD 레이아웃. - 하단 패널: 각 나이트 상태를 실행하는 인터랙티브 행동 버튼. - 오른쪽 상단 패널: 카메라 앵글 전환 버튼. - 장작 카운터: 추가한 장작 수와 현재 불의 세기를 표시합니다. - 사운드(Web Audio API): 절차적으로 합성한 장작 타는 소리와 밤의 산들바람/귀뚜라미 앰비언스를 제공하며, 음소거/음소거 해제 토글 버튼을 포함하세요. ### 6. 기술 사양 - 단일 독립 실행형 index.html 파일. - CDN(https://t.co/W8o3SZwkCj 또는 unpkg)을 통해 로드하는 ES 모듈을 사용하세요. - 모듈화되고 주석이 잘 작성된 코드 구조(initScene, buildEnvironment, buildKnight, buildCampfire, setupUI, setupAudio, animate). - 카메라 종횡비와 픽셀화 패스 해상도를 갱신하는 완전한 반응형 창 크기 변경 핸들러.