Plancast — 건축 3D 뷰어·벽 편집·링크 공유
건축 3D 모델을 웹에서 확인하고 벽을 간단히 편집한 뒤 보기 전용 링크로 공유하는 데모입니다.
- 기술 스택
- Next.js 16 · React 19 · TypeScript · Three.js · Tailwind CSS 4 · Node.js 24 · SQLite · Docker
직접 만든 가상 공간으로 제작한 독립 데모이며 실제 고객사 수행 사례가 아닙니다. 고객의 실제 모델과 실제 스마트폰·카카오톡은 검증하지 않았습니다. 링크를 가진 사람이 해당 권한을 가지므로 기밀 모델은 올리지 마세요.
데모 사이트 보기
구현 상세 보기접기
제작 목적
건축 3D 모델을 웹에서 확인하고 벽을 간단히 편집한 뒤 보기 전용 링크로 공유하는 데모입니다. 직접 만든 가상 공간으로 모델 불러오기부터 치수·재질 변경, 저장과 갤러리 공개까지 체험합니다.
핵심 구현
- OBJ·DAE 파일을 불러오고 마우스·터치로 회전·확대합니다. 위에서·전체·눈높이 시점으로 공간을 살펴봅니다.
- 객체별로 나뉜 벽의 높이·두께를 바꾸고 삭제·복원합니다. 벽과 바닥에는 8종의 재질 프리셋을 적용합니다. 병합형 모델은 치수 편집을 제한합니다.
- 원본 모델을 유지하며 편집 내용만 저장합니다. revision을 비교해 다른 창의 저장 내용을 덮어쓰는 충돌을 감지합니다.
- 편집 링크와 보기 전용 링크를 분리합니다. 공유 화면에는 편집 도구와 편집 토큰을 노출하지 않습니다.
- 추천 공간 8개와 사용자가 공개한 공간을 갤러리에서 보여 줍니다. 썸네일을 만들고 원본을 보존한 사본으로 편집을 시작합니다.