플러스프로젝트 배경
1) 예상 리스크 및 대응 계획 - 대용량 OBJ·STL 파일(50MB 이상) 로드 시 메인 스레드 블로킹을 방지하기 위해 Web Worker 기반 비동기 파싱 전략을 설계해야 합니다 - Three.js 렌더 루프에서 매 프레임 주석 핀 위치를 재계산할 때 핀 수가 많아지면 성능 저하가 발생할 수 있어 Frustum Culling 기반 핀 렌더 최적화 전략이 필요합니다 - 360도 스프라이트 뷰어에서 고
프로젝트 성과
Three.js WebGL 뷰어 + 워터마크 이중 레이어 구현
Three.js WebGLRenderer 씬과 Canvas 2D 오버레이를 동일 컨테이너에 배치하여 3D 인터랙션을 방해하지 않고 사용자 식별 워터마크를 실시간 합성하는 구조 구현
Raycaster 기반 3D 주석 핀 영속 시스템 설계
Three.js Raycaster 교차점 좌표를 정규화하여 DB에 저장하고, 매 렌더 프레임 핀 위치를 재계산하여 카메라 뷰 변경과 무관하게 모델 표면 고정 복원 구조 구현
3계층 역할 기반 접근 제어 설계
JWT role 클레임 + Express 미들웨어 이중 검증으로 관리자·내부직원·협력사 3계층 권한을 API 엔드포인트와 프론트 메뉴 양쪽에서 제어하는 구조 구현
스프라이트 슬라이더 360도 뷰어 구현
마우스 dragX 누적 이동량으로 프레임 인덱스를 실시간 계산하고 S3 pre-signed URL 순차 프리패치로 드래그 중 끊김 없는 다각도 사진 전환 구조 구현
협력사 승인 플로우 및 계정 정지 처리 설계
pending·approved·rejected·suspended 상태 ENUM 기반 협력사 계정 라이프사이클 설계, 정지 시 JWT 즉시 무효화 구조로 실시간 접근 차단 구현
핵심 기능
Three.js 3D 모델링 뷰어
OBJ·STL 포맷 3D 파일을 브라우저에서 WebGL로 렌더링하고, 마우스 조작으로 360도 회전·확대·패닝을 지원하며 사용자 식별 워터마크 오버레이를 적용하는 메인 뷰어 화면입니다
진행 단계
도메인 분석 및 DB 스키마 설계
2026.05
감수 데이터 도메인 분석, 3D 주석 좌표·협력사 권한·파일 메타 포함 PostgreSQL 테이블 12개 정의 및 인덱스 전략 수립
프로젝트 상세
1) 포트폴리오 소개 Three.js 기반 OBJ/STL 3D 모델링 뷰어와 2D 다각도 360도 스프라이트 뷰어, 뷰어 위 주석(Annotation) 시스템, 3계층 권한 관리를 통합한 완구·피규어 감수 데이터 아카이브 플랫폼 MVP를 React + Node.js + PostgreSQL 풀스택으로 설계·구현합니다. 공고 핵심 요구사항인 Three.js WebGL 렌더링, 워터마크 오버레이, 협력사 권한 제
