TL;DR

  • 팬 프로젝트가 원작의 EGA 배경을 바탕으로 34개 공간을 연결한 브라우저용 3D 건물 탐험 경험으로 재구성함.
  • 원작의 색상, 가구와 세부 요소를 유지하면서 카메라 시점 밖까지 살펴볼 수 있음.
  • 퍼즐이나 아이템 수집 없이 문, 사다리와 비밀 통로를 이용하는 1인칭 건축물 탐험 방식임.
  • 방의 기하 구조와 조명은 Blender로 생성하고, Three.js 뷰어가 브라우저에서 연결 공간을 불러오는 구성임.
  • Docker 기반으로 모델과 웹사이트를 빌드할 수 있으며, 결과물은 백엔드가 필요 없는 정적 웹사이트임.

3D로 재구성한 Maniac Mansion

  • 브라우저에서 Maniac Mansion 저택 내부를 걸어 다니며 탐험하는 팬 프로젝트임.
  • 원작의 EGA 배경을 연결된 3D 공간으로 재구성하고, 고유한 색상과 가구, 세부 요소를 유지하면서 원래 카메라 앵글 너머까지 살펴볼 수 있게 함.
  • 원작 EGA 아트워크와 3D 재구성 화면을 비교할 수 있으며, 두 이미지 중 하나를 클릭해 저택을 탐험할 수 있음.

저택 탐험

  • 외부에서 시작해 현관 계단을 올라 정문을 열고, 현관 홀부터 도서관과 주방, 침실과 다락방, 천문대, 지하 실험실, 수영장과 차고를 포함한 34개 공간을 탐험할 수 있음.
  • 수영장 물을 빼고 바닥으로 내려가거나 사다리를 따라 다른 층으로 이동할 수 있음.
  • 퍼즐 풀이, 인벤토리 아이템 수집, 캐릭터 조작이 없는 1인칭 건축물 워크스루임. 문, 사다리와 숨겨진 통로로 원작의 퍼즐을 진행하지 않고도 공간을 탐험할 수 있음.
  • 방은 원작 아트워크를 바탕으로 단순한 기하 구조와 부드러운 사전 베이킹 조명으로 모델링함.
  • 원작의 페인팅 배경은 물리적으로 일관된 하나의 건물을 묘사하지 않으므로 일부 치수와 보이지 않는 벽, 연결 구조는 해석을 반영함.
  • 출입구 포털을 사용해 방마다 고유한 비율을 유지하면서도 걸어서 연결된 공간으로 이동할 수 있음.
  • Original 기능으로 현재 방을 EGA 배경과 비교할 수 있음. 데스크톱에서는 작은 미리보기를 확대할 수 있고, 모바일에서는 이미지가 오버레이로 열리며 이동이 일시 정지됨.

방으로 바로 이동

  • 아래 구역 링크는 선택한 방에서 시작하며, 나머지 저택 공간도 계속 연결된 상태임. 수영장 링크는 수영장 데크에서 시작하며, 물을 빼면 수영장 바닥을 탐험할 수 있음.
  • 외부: 정면 외관 · 수영장 데크 · 차고와 앞마당
  • 1층: 현관 홀과 계단참 · 거실 · 주방 · 식당 · 식료품 저장실 · 도서관
  • 현관 위층: 미술실 · 음악실 · 보안 복도 · 의료실 · 오락실 · 창문 있는 계단 홀 · 사진실
  • 침실과 위층 복도: 위층 복도 · 라디오 침실 · 하트 침실 · 초록색 침실 · 미라 방 · 미라 욕실 · 타자기 방
  • 다락방과 지붕: 금고 다락방 · Green Tentacle의 방 · 숨겨진 다락 계단 · 전선 다락방 · 천문대
  • 지하실과 실험실: 지하실 · 집 아래 통로 · 지하 감옥 · 외부 실험실 · 주 실험실 · 운석 방

조작 방법

  • 이동: 데스크톱에서는 WASD 또는 위쪽/아래쪽 화살표 키를 사용함.
  • 빠르게 걷기: Shift 키를 누른 채 이동함.
  • 둘러보기: 장면을 클릭한 뒤 마우스를 움직이거나 드래그하며, 왼쪽/오른쪽 화살표 키로 회전함.
  • 문 열기·닫기, 사다리 및 기타 상호작용: 대상에 다가가 조준한 뒤 E 키를 누름.
  • 일시 정지·마우스 해제: Esc 키를 누름.
  • 위치 초기화: R 키를 누름.
  • 터치 기기에서는 왼쪽 절반의 아무 곳에나 엄지를 대면 플로팅 조이스틱이 나타남. 드래그해 이동하고 손가락을 떼면 멈춤.
  • 화면 오른쪽 절반을 스와이프해 둘러보고, 상황별 동작 버튼을 눌러 문과 사다리를 조작함. 문은 닫힌 상태로 시작하며, 걷기 시작하면 도입부 조작 안내가 사라짐.

로컬에서 실행

  • 새로 체크아웃한 저장소에는 원본 아트워크와 빌더가 포함됨. Docker와 Compose를 사용해 모델과 웹사이트를 먼저 생성함.
  • 저장소 주소는 https://github.com/s-macke/maniac-mansion-3d.git임. 저장소를 복제하고 프로젝트 디렉터리로 이동한 뒤 ./docker-build.sh all을 실행함.
  • 컨테이너에는 Blender, Python, npm이 포함됨. 첫 빌드에서는 모든 방의 조명을 베이킹하므로 수십 분이 걸릴 수 있음.
  • 빌드된 웹사이트는 Python 3의 HTTP 서버로 제공할 수 있음. 서버는 web/dist/client 디렉터리를 루프백 주소 127.0.0.1의 포트 5174에 연결하며, 접속 주소는 http://127.0.0.1:5174/임.
  • Node.js가 설치되어 있다면 ./walkthrough.sh로 빌드된 사이트를 제공할 수도 있음. Docker 없이 빌드하는 방법은 로컬 도구 체인 및 재빌드 안내에 포함됨.

제작 방식

  • Blender의 Python 빌더가 방의 기하 구조를 생성하고 조명을 베이킹한 뒤 용량이 작은 GLB 모델을 내보냄.
  • Three.js 뷰어가 브라우저에서 방을 조립하고, 문과 사다리 공용 에셋을 재사용하며, 연결된 공간을 필요할 때 불러옴.
  • 조명은 에셋에 베이킹되므로 브라우저에서 전역 조명 계산이 필요하지 않음.
  • 결과물은 백엔드가 없는 정적 웹사이트임. 에셋 URL이 상대 경로이므로 도메인 루트나 하위 디렉터리에서 동일한 빌드를 실행할 수 있음.
  • GitHub Pages 워크플로는 Blender 에셋을 생성하고 웹사이트를 컴파일 및 검사한 뒤, Actions → Build and deploy GitHub Pages → Run workflow에서 수동으로 시작하면 main 브랜치에서 배포함.
  • 디렉터리 구성:
  • source/: 원본 배경 참고 자료
  • rooms/: 방별 Blender 빌더, 설정과 참고 사항
  • shared/: 재사용 가능한 문과 사다리 빌더
  • house/layout.json: 방 공간과 연결 정보
  • scripts/: 에셋 생성, 베이킹과 빌드 도구
  • web/: 브라우저 뷰어, 내비게이션과 테스트
  • generated/: 로컬 Blender 장면, 모델, 보고서와 미리보기. Git에서 제외됨.
  • 첫 빌드 이후에는 ./docker-build.sh room kitchen --site로 주방 방과 웹사이트만 다시 빌드할 수 있음.
  • 뷰어 개발에는 Node.js 22.13 이상에서 ./walkthrough.sh dev를 사용함. 점진 빌드와 아키텍처별 변경 위치는 Docker 안내 및 아키텍처 안내에 포함됨.

추가 자료

  • 아트워크, 색상 팔레트와 참고 자료 문서
  • 방 연결과 불확실한 경로
  • 출입구 포털과 사다리 연결
  • 브라우저 빌드, 조작법과 검증
  • 소스만으로 재빌드하기와 GitHub Pages 배포
  • 프로젝트 계획과 개발 기록

크레딧

  • Maniac Mansion과 원작 아트워크는 Lucasfilm Games가 제작함.
  • 이 프로젝트는 비공식 팬 재구성이며, 원작 게임과 아트워크의 권리는 각 권리 보유자에게 있음.