브라우저 기반 2D/3D 인테리어 디자인 시뮬레이터
wy51ai/floorplan-3d
GitHub별도의 빌드 과정이나 서버 구축 없이 웹 브라우저에서 바로 구동되는 순수 프론트엔드 기반의 인테리어 디자인 도구입니다.
별도의 설치 과정 없이 웹 브라우저에서 2D 디자인부터 3D 체험, 그리고 예상 공사비 계산까지 실질적인 인테리어 계획을 세울 수 있어요.
- 2D 평면도에서 가구를 배치하고 벽을 수정하면, 이를 바탕으로 3D 시뮬레이션 환경에서 실시간으로 걸어 다니는 체험이 가능합니다.
- 단순한 디자인을 넘어 방의 면적과 바닥재를 선택할 때 예상 공사비까지 계산하여 실질적인 인테리어 계획에 도움을 줍니다.
- HTML 파일만으로 구동되는 것이 장점이나, 고화질 3D 시뮬레이션 기능을 사용하려면 초기 로딩 시 인터넷 연결이 필요합니다.
이 도구는 별도의 빌드 과정이나 서버 구축 없이 순수 프론트엔드로 작동하는 웹 애플리케이션입니다. 사용자는 2D 평면도에서 가구를 배치하고 벽을 수정할 수 있으며, 이 작업은 1:60 또는 1:100 비율로 mm 단위의 크기를 표시합니다. 좌측의 가구 라이브러리에서 60여 종의 가전과 가구를 끌어다 놓아 이동, 회전, 크기 조절이 가능하며, 벽에 자동으로 흡착됩니다. 또한, 비내력벽을 수정하거나 제거할 수 있는 기능도 제공됩니다.
2D 배치된 내용은 Three.js를 활용한 3D 시뮬레이션 환경으로 실시간 전환되어 체험할 수 있습니다. 사용자는 걷는 모드(WASD)로 공간을 자유롭게 탐색하며, 문을 열고 닫는 등의 상호작용이 가능합니다. 이 3D 환경에서는 캐비닛의 분할선이나 손잡이, 반사되는 금속 및 세라믹 재질 등 정교한 가구 모델링을 지원하며, 3D에서 선택하거나 이동시킨 가구는 2D 배치와 실시간으로 동기화됩니다.
단순히 디자인하는 것을 넘어 실제 인테리어 계획에 필요한 통계 기능도 제공합니다. 방의 면적과 사용 면적이 자동으로 계산되며, 바닥재(나무 마루, 타일, 대리석 등)를 변경할 때 해당 재료의 단가와 5% 손실률을 적용하여 예상 공사비를 추정할 수 있습니다. 이 모든 데이터는 브라우저 로컬 스토리지에 저장되며, PNG 이미지나 JSON 파일로 내보내기 할 수 있습니다.
이 도구는 어떤 방식으로 작동하나요?
별도의 빌드 과정이나 서버 구축 없이 순수 프론트엔드로 작동하는 웹 애플리케이션이에요. 사용자는 2D 평면도에서 가구를 배치하고 벽을 수정할 수 있으며, 이 작업은 1:60 또는 1:100 비율로 mm 단위의 크기를 표시해요.
디자인 외에 어떤 실질적인 정보도 얻을 수 있나요?
방의 면적과 사용 면적이 자동으로 계산돼요. 또한, 바닥재를 변경할 때 해당 재료의 단가와 5% 손실률을 적용하여 예상 공사비를 추정할 수 있어요.
2D로 배치한 디자인이 3D에서 어떻게 체험되나요?
2D에 배치된 내용은 Three.js를 활용해 3D 시뮬레이션 환경으로 실시간 전환돼요. 사용자는 WASD 키를 이용해 공간을 자유롭게 탐색할 수 있고, 문 열고 닫기 같은 상호작용도 가능해요.