본문으로 건너뛰기

트렌딩 - GitHub 인기 레포 & HuggingFace 모델

pascalorg/editor

TypeScript64 / 0

React Three Fiber와 WebGPU로 만든, 벽·층·구역을 직접 그리는 웹 기반 3D 건물 에디터.

TL;DR

Pascal Editor는 사이트-건물-층-벽/슬라브/구역으로 이어지는 노드 계층을 가진 3D 건물 모델러로, 데이터·렌더링·편집 UI를 core/viewer/editor 세 패키지로 명확히 나눠 뷰어만 따로 임베드하거나 편집 기능까지 통째로 붙일 수 있게 설계됐다. 모든 노드는 평평한 딕셔너리에 저장되고 변경된 노드만 'dirty'로 표시돼, 매 프레임 전체 씬을 다시 계산하지 않고 바뀐 부분만 WallSystem·SlabSystem 같은 전용 시스템이 지오메트리를 재생성한다. Zustand 스토어가 IndexedDB에 자동 저장하고 Zundo로 50단계 실행취소까지 지원해, 브라우저를 새로고침해도 작업이 남아 있고 실수해도 되돌릴 수 있다. 벽에 문·창문을 CSG로 잘라내는 처리나 스토어 바깥에서 상태를 직접 읽고 쓰는 API까지 갖춰, React 컴포넌트 밖의 시스템 코드에서도 씬을 조작할 수 있다.

핵심 포인트

  • 변경된 노드만 'dirty'로 표시해 매 프레임 재계산하는 방식으로, 큰 건물 모델에서도 렌더링 부담을 노드 하나 단위로 줄인다.
  • core·viewer·editor 패키지를 분리해, 편집 기능 없이 뷰어만 임베드하는 것과 편집까지 붙이는 것을 선택할 수 있게 만들었다.
  • IndexedDB 자동 저장과 50단계 undo/redo(Zundo)를 기본으로 갖춰, 별도 서버 없이도 브라우저에서 작업이 안전하게 유지된다.
  • 문·창문 같은 부속물을 벽에 CSG로 잘라 넣는 처리를 WallSystem이 전담해, 노드 데이터와 실제 지오메트리 생성 로직이 분리돼 있다.

23.6k

STARS

2.9k

FORKS

+83

TRENDING

64

조회수

watchers 23.6kopen issues 59MIT License

관련 토론

아직 관련 토론이 없습니다.

댓글

댓글을 작성하려면 로그인이 필요합니다.