docs: 기획, 분석, 설계 및 v0.1.00~v0.1.08 실행 보고서 문서 추가
This commit is contained in:
1 parent
3cc9afeac8
commit
2302a5407b
9 files changed
+641
No files matched your search
@@ -0,0 +1,81 @@
|
||||
# [실행] 2D CAD 도면 기반 3D 모델 변환 및 웹 뷰어 표출 시스템 구축
|
||||
|
||||
| 버전 | 일자 | 작성자 | 변경 요약 |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| `v0.1.00` | 2026-10-21 | 사용자 (Agent) | 최초 작성: 2D DWG 도면 3D 변환 파이프라인, Three.js 웹 뷰어, WSL2 환경 연동 및 Git 형상 관리 구축 완료 |
|
||||
|
||||
---
|
||||
|
||||
## 1. 개요 및 배경
|
||||
|
||||
- **업무 명칭**: 2D CAD 도면 기반 수로암거 및 옹벽형 날개벽 3D 모델 변환 및 웹 뷰어 표출
|
||||
- **기준 도면 (RAG)**: 대산당진 수로암거(`STA.13+611.21`) 일반도 및 구조도/배근도 DWG 5종
|
||||
- **작업 환경**: WSL2 (Ubuntu Linux)
|
||||
- **코드 저장소**: `Code/3d-drawing/` (Git 형상 관리 및 자동 커밋·로그)
|
||||
- **적용 지침**: `.claude/taskexecutionagent.md` (v0.3.01 전역 지침 엄격 준수)
|
||||
|
||||
---
|
||||
|
||||
## 2. 단계별 구현 및 엔지니어링 결과
|
||||
|
||||
### 2.1 1단계: 도면 불러오기 및 도면 종류 자동 판별
|
||||
- **파싱 엔진**: `ezdwg` 및 `ezdxf`를 통합하여 바이너리 DWG 및 텍스트 DXF 도면 파싱 지원
|
||||
- **키워드 자동 판별**:
|
||||
- 도면명에 `'일반'` 포함 ➔ **일반도(`GENERAL`)** 자동 분류 (`13. 수로암거 일반도(STA.13+611.21)(02).dwg`)
|
||||
- 도면명에 `'배근'` 또는 `'구조'` 포함 ➔ **구조도/배근도(`REBAR`)** 자동 분류 (`14. 수로암거 구조도 4종`)
|
||||
- 키워드 매칭 불가 시 ➔ **미분류(`UNCLASSIFIED`)** 상태로 수동 토글 UI 제공
|
||||
- **파라미터 추출**: 일반도 평면도 상·하부 점선(`CS-CONC-MINR`, `A-DASHD01`) 분석을 통해 내공 스팬 $B=2.00\text{ m}$, 사각 $\theta=105.879^\circ$, 외폭 $3.40\text{ m}$ 자동 산출
|
||||
|
||||
### 2.2 2단계: 일반도 기반 3D 외형 파라메트릭 솔리드 모델링
|
||||
- **모델링 원칙 준수**:
|
||||
- 도면에 없는 시점부 날개벽(`START_LEFT`, `START_RIGHT`) 임의 생성 차단 (모델링 제외)
|
||||
- 도면에 표기된 종점부 좌측(`END_LEFT`, $L=4.35\text{ m}$, $134^\circ$) 및 종점부 우측(`END_RIGHT`, $L=5.40\text{ m}$, $151^\circ$) 날개벽 100% 반영
|
||||
- **수밀성(Watertight Solid) 2-Manifold 검증**:
|
||||
- 암거 본체 및 종점부 2개 날개벽 모든 메시에 대해 모든 변(Edge)이 정확히 2개의 면(Face)을 공유하는 닫힌 다양체(2-Manifold Closed Solid) 구조 검증 완료 (Non-manifold edges: 0개)
|
||||
- **체적 산출**:
|
||||
- 암거 본체: $59.04\text{ m}^3$
|
||||
- 종점부 좌측 날개벽: $7.32\text{ m}^3$
|
||||
- 종점부 우측 날개벽: $9.09\text{ m}^3$
|
||||
- **총 콘크리트 체적**: **$75.45\text{ m}^3$**
|
||||
|
||||
### 2.3 3단계: 배근도 기반 3D 철근 배근 모델링
|
||||
- **피복두께 준수**: 날개벽 전면/배면/저판 피복두께 80mm 준수
|
||||
- **19종 철근 기호 및 총 508본 3D 입체 배근**:
|
||||
- 우각부 절곡 보강근: `C1, C2` (H19 @250, 각 13본, $a=700, b=700$, 사각 절곡)
|
||||
- 벽체 수직 주철근: `W1, W5, W6` (H16 @250 / 1·2Cycle 교대 @125)
|
||||
- 벽체 수평 배력근: `W2~W4, W7~W9` (H13 @250, 하부 4단, 상부 8단, 천단 연단 1열)
|
||||
- 저판 횡방향 주철근: `F1, F2, F6` (H16 @250 / 1·2Cycle 교대 @125, 양단 후크)
|
||||
- 저판 종방향 배력근: `F3~F5, F7~F9` (H13 @250, 연단근 및 사면연단근 포함)
|
||||
- 헌치/전단보강근: `K1, K2, S1~S3` (H16, H13)
|
||||
- **철근 가공 재료표 (BBS)**:
|
||||
- 종점부 좌측: 231본, 총연장 $485.111\text{ m}$, 중량 $0.688\text{ TON}$ (할증 3% 포함 $0.709\text{ TON}$)
|
||||
- 종점부 우측: 277본, 총연장 $607.664\text{ m}$, 중량 $0.855\text{ TON}$ (할증 3% 포함 $0.881\text{ TON}$)
|
||||
- **합계**: **508본**, 총연장 **$1,092.775\text{ m}$**, 총중량 **$1.543\text{ TON}$** (할증 3% 포함 **$1.590\text{ TON}$**)
|
||||
|
||||
### 2.4 Three.js 기반 3D 웹 뷰어 인터페이스
|
||||
- **기능**:
|
||||
- 마우스 궤도 회전(Orbit), 팬(Pan), 줌(Zoom) 제어
|
||||
- 부재별 가시성(암거 본체, 날개벽, 철근군) 개별 On/Off 및 콘크리트 반투명(X-Ray) 모드 지원
|
||||
- 철근 직경별(H19 빨강, H16 파랑, H13 초록) 색상 코딩 및 굵기 반영
|
||||
- 3D 모델 OBJ, STL, DXF 및 철근 재료표 UTF-8 BOM CSV 내보내기
|
||||
|
||||
---
|
||||
|
||||
## 3. Git 형상 관리 및 커밋 이력
|
||||
|
||||
`Code/3d-drawing/` 리포지토리에 작업 단위별 4개의 Semantic Commit을 순차 적용하고 각 커밋 직후 `git log`를 자동 수행함.
|
||||
|
||||
```text
|
||||
* aa3ae54 feat(wsl2): add WSL2 execution script, automated test suite and documentation
|
||||
* e5abc6f feat(viewer): implement Three.js interactive 3D web viewer and Flask API server
|
||||
* 42726ff feat(modeling): implement 3D parametric solid and rebar modeling engines
|
||||
* 5ddc97c feat(parser): add 2D CAD DWG/DXF parsing and drawing classification engine
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. 검증 결과 요약
|
||||
|
||||
- **테스트 스위트**: `Code/3d-drawing/test_pipeline.py`
|
||||
- **검증 결과**: 전수 6/6 통과 (`Ran 6 tests in 0.298s, OK`)
|
||||
- **실행 서버 상태**: Flask 3.1.3 서버가 WSL2 Ubuntu 환경에서 백그라운드 구동 중 (`http://localhost:5000`, HTTP 200 OK)
|
||||
@@ -0,0 +1,70 @@
|
||||
# [실행] 2D CAD 도면 기반 3D 모델 변환 및 웹 뷰어 표출 시스템 구축 (3단계 세로 2단 UI 개편)
|
||||
|
||||
| 버전 | 일자 | 작성자 | 변경 요약 |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| `v0.1.01` | 2026-10-22 | 사용자 (Agent) | 3단계 UI 개편: 2단계와 일관된 세로 2단 분할 레이아웃 적용, 부재 선택 시 3D 카메라 줌 및 선택 부재/철근 집중 표출, 우측 인터랙티브 HUD 및 철근 기호 상세제원 플로팅 카드 구현 |
|
||||
| `v0.1.00` | 2026-10-21 | 사용자 (Agent) | 최초 작성: 2D DWG 도면 3D 변환 파이프라인, Three.js 웹 뷰어, WSL2 환경 연동 및 Git 형상 관리 구축 완료 |
|
||||
|
||||
---
|
||||
|
||||
## 1. 개요 및 배경
|
||||
|
||||
- **업무 명칭**: 2D CAD 도면 기반 수로암거 및 옹벽형 날개벽 3D 모델 변환 및 웹 뷰어 표출 (3단계 세로 2단 UI 개편)
|
||||
- **기준 도면 (RAG)**: 대산당진 수로암거(`STA.13+611.21`) 일반도 및 구조도/배근도 DWG 5종
|
||||
- **작업 환경**: WSL2 (Ubuntu Linux)
|
||||
- **코드 저장소**: `Code/3d-drawing/` (Git 형상 관리: Commit `573c0bc`)
|
||||
- **적용 지침**: `.claude/taskexecutionagent.md` (v0.3.01 전역 지침 엄격 준수)
|
||||
|
||||
---
|
||||
|
||||
## 2. 3단계 UI 개편 상세 내역
|
||||
|
||||
### 2.1 세로 2단 레이아웃 일관성 확보
|
||||
- **레이아웃 통일**: 기존의 좌·중·우 3열 배치에서 2단계와 완전히 동일한 **좌측 제어 패널(420px) + 우측 3D 뷰어(전체 폭)** 세로 2단 레이아웃으로 전면 개편.
|
||||
- **도면 확인 탭 및 미리보기 삭제**: 3단계 진입 시 불필요한 2D 도면 확인 탭과 2D 캔버스 뷰어를 제거하고 3D 모델링 공간을 최대화.
|
||||
|
||||
### 2.2 좌측 UI: 구조물 중심 선택 체계
|
||||
- **표시 구조물**: 실제 도면에 표기된 부재만 선별 표출 (시점부 임의 생성 방지 지침 준수)
|
||||
1. `암거 본체 (STA.13+611.21)`: 클릭 시 전체 보기(`fitView()`), 모든 부재 정상 표출
|
||||
2. `종점 좌측 날개벽 (L=4.35m)`: 클릭 시 해당 날개벽 중심 3D 카메라 확대 Focus
|
||||
3. `종점 우측 날개벽 (L=5.40m)`: 클릭 시 해당 날개벽 중심 3D 카메라 확대 Focus
|
||||
- **3D 상호작용 및 시각적 위계**:
|
||||
- **선택된 날개벽**: 콘크리트 외형 및 내부 19종 철근을 정상 색상과 선명도(100%)로 강조.
|
||||
- **비선택 구조물 (암거 및 반대편 날개벽)**: 모델에서 완전히 숨기지 않고 투명도(0.08) 및 옅은 그레이(0.12)로 비활성화하여 위치·형상 참고 가능 상태 유지.
|
||||
|
||||
### 2.3 우측 UI: 3D 모델 뷰어 및 인터랙티브 HUD
|
||||
- **철근 기호 상세 제원 플로팅 카드**:
|
||||
- 평상시(미선택): 화면을 가리지 않도록 완전 숨김(`display: none`).
|
||||
- 3D 철근 클릭 시: 우측 상단 플로팅 카드로 즉시 표출 (기호, 직경 SD400, 배근 부위, 간격/피복, 좌/우 본수 및 길이, 중량, 철근 절곡 상세 형상 SVG).
|
||||
- 닫기(`✕`) 버튼 또는 배경 클릭 시 즉시 닫힘.
|
||||
- **3D 철근 투시 및 표현 제어 HUD**:
|
||||
- 콘크리트 외형 투명도(X-Ray) 슬라이더 (0.05 ~ 0.90)
|
||||
- 철근 굵기 표현 배율 슬라이더 (1.0x ~ 3.0x)
|
||||
- 직경별(H19 빨강, H16 파랑, H13 초록) 원클릭 필터 필
|
||||
- 부위별(우각부, 벽체, 저판, 헌치) 원클릭 필터 필
|
||||
- 원클릭 접기/펼치기(`▾`/`▸`) 토글 지원
|
||||
- **철근 재료표 및 배근 내보내기**:
|
||||
- `📊 전체 철근 재료표 (BOM) 보기` 모달 연동
|
||||
- CSV / OBJ / STL / DXF 내보내기 퀵 액션 그리드 배치
|
||||
|
||||
---
|
||||
|
||||
## 3. Git 형상 관리 및 커밋 이력
|
||||
|
||||
`Code/3d-drawing/` 리포지토리에 커밋을 적용하고 `git log`를 자동 수행함.
|
||||
|
||||
```text
|
||||
* 573c0bc feat(ui): update Step 3 rebar modeling to vertical 2-column layout and interactive controls
|
||||
* aa3ae54 feat(wsl2): add WSL2 execution script, automated test suite and documentation
|
||||
* e5abc6f feat(viewer): implement Three.js interactive 3D web viewer and Flask API server
|
||||
* 42726ff feat(modeling): implement 3D parametric solid and rebar modeling engines
|
||||
* 5ddc97c feat(parser): add 2D CAD DWG/DXF parsing and drawing classification engine
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. 검증 결과 요약
|
||||
|
||||
- **단위 테스트 (`test_pipeline.py`)**: 6/6 전수 PASS (`Ran 6 tests in 0.294s, OK`)
|
||||
- **구문 검증**: Node.js JS 구문 및 HTML5 파서 에러 0건
|
||||
- **실행 서버 상태**: Flask 3.1.3 서버가 WSL2 Ubuntu 환경에서 정상 구동 중 (`http://localhost:5000`, HTTP/1.1 200 OK)
|
||||
@@ -0,0 +1,75 @@
|
||||
# [실행] 2D CAD 도면 기반 3D 모델 변환 및 웹 뷰어 표출 시스템 구축 (3단계 날개벽별 철근 선택 분리 및 UI 개선)
|
||||
|
||||
| 버전 | 일자 | 작성자 | 변경 요약 |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| `v0.1.02` | 2026-10-22 | 사용자 (Agent) | 3단계 배근도 기반 3D 철근배근 UI 및 상호작용 개선: 1) 선택 날개벽 종속 철근 격리 활성화 (타 날개벽 동일 기호 활성화 방지), 2) 카메라 시점 보존 (빈 바닥 클릭 시 구도 초기화 방지, 좌측 바 클릭 시에만 구도 변경), 3) Three.js Sprite 줌 반응형 스케일 보정을 통한 3D 텍스트 크기 고정, 4) 좌측 바/우측 창 UI 재배치 및 1.5배 텍스트 확대, 5) 암거본체 초기 선택 시 날개벽 명칭만 표출 |
|
||||
| `v0.1.01` | 2026-10-22 | 사용자 (Agent) | 3단계 UI 개편: 2단계와 일관된 세로 2단 분할 레이아웃 적용, 부재 선택 시 3D 카메라 줌 및 선택 부재/철근 집중 표출, 우측 인터랙티브 HUD 및 철근 기호 상세제원 플로팅 카드 구현 |
|
||||
| `v0.1.00` | 2026-10-21 | 사용자 (Agent) | 최초 작성: 2D DWG 도면 3D 변환 파이프라인, Three.js 웹 뷰어, WSL2 환경 연동 및 Git 형상 관리 구축 완료 |
|
||||
|
||||
---
|
||||
|
||||
## 1. 개요 및 배경
|
||||
|
||||
- **업무 명칭**: 3단계 배근도 기반 3D 철근배근 UI 개선 및 날개벽별 철근 선택·활성화 분리
|
||||
- **작업 환경**: WSL2 (Ubuntu Linux), Python 3.14 (`~/.venv-3d-drawing`), Three.js WebGL
|
||||
- **코드 저장소**: `Code/3d-drawing/` (Git 형상 관리: Commit `c1f67c6`)
|
||||
- **실행 서버**: Flask 웹 서버 (`http://localhost:5000`)
|
||||
|
||||
---
|
||||
|
||||
## 2. 세부 수정 내역 및 구현 결과
|
||||
|
||||
### 2.1 좌측 바 UI 수정
|
||||
1. **적용배근도/구조도 테이블 삭제**: 좌측 바 상단 `#step3-rebar-summary-card` 완전 제거, 구조물 선택 리스트를 최상단에 배치.
|
||||
2. **구조물 텍스트 1.5배 확대**: `.struct-card-step3-title` 폰트 크기를 기존 대비 1.5배인 `17.5px !important` (굵기 700)로 확대.
|
||||
3. **'3D 철근 투시 및 표현제어' 패널 이동**: 기존 우측 플로팅 HUD에서 좌측 바 구조물 선택 패널 하단으로 이동 배치하여 뷰포트 가림 방지.
|
||||
|
||||
### 2.2 우측 창 UI 수정
|
||||
1. **철근 상세 정보 표시 조건**: 철근이 선택된 경우에만 플로팅 카드를 표출(`display: flex`), 미선택 시에는 완전 숨김(`display: none`).
|
||||
2. **철근 번호 텍스트 1.5배 확대**: 상세 정보 창 상단 철근 번호(`#step3-detail-title`)를 `18px !important` (굵기 800, 황금색 골드 `#facc15`)로 확대. 소속 날개벽 제원 및 중량 강조.
|
||||
|
||||
### 2.3 우측 메인창 UI 및 상호작용 기능 수정
|
||||
1. **불필요한 안내 문구 제거**: `[3단계: 배근도 기반 3D 철근배근]` 뱃지 및 `좌클릭: 회전 | 우클릭: 이동 | 휠: 줌...` 오버레이 칩 제거.
|
||||
2. **초기 선택 구조물 '암거본체' 설정**: 3단계 진입 시 기본 선택 구조물을 `'CULVERT'`로 설정하고, 3D 모델 위에 "종점부 좌측 날개벽", "종점부 우측 날개벽" 2개 명칭만 깔끔하게 표출. 암거본체의 철근 상세 정보나 불필요한 단면 마커는 미표시.
|
||||
3. **3D 텍스트 크기 화면상 고정 (Constant Screen Size)**: Three.js 렌더 루프(`animate()`)에서 카메라와 텍스트 스프라이트 간의 거리에 비례하여 `scale.set(dist * 0.040 * aspect, dist * 0.040, 1)`로 동적 스케일링. 마우스 휠로 줌 인/줌 아웃을 수행해도 텍스트 크기가 확대/축소되지 않고 모델 가림 방지.
|
||||
4. **날개벽별 철근 선택 및 활성화 분리 (최우선 과제)**:
|
||||
- 철근 선택 및 활성화는 현재 선택된 날개벽(`wingwallId`)에 완전 종속.
|
||||
- 특정 날개벽에서 철근을 클릭하면 오직 해당 날개벽에 속한 철근만 골드(`#facc15`) 하이라이트 및 3D 라벨 표시.
|
||||
- 타 날개벽의 동일 기호 철근은 `opacity: 0.10, color: #64748b`로 비활성화.
|
||||
- 좌측 바에서 날개벽을 변경하면 이전 철근 선택 상태 및 상세 정보 창을 즉시 초기화.
|
||||
5. **3D 모델 기본 구도 변경 조건 수정**:
|
||||
- 사용자가 회전/이동 조작 후 빈 바닥 영역을 클릭하더라도 카메라 시점을 절대 리셋하지 않고 사용자의 시점 유지.
|
||||
- 좌측 바에서 날개벽 카드를 직접 클릭한 경우에만 해당 날개벽을 중심으로 기본 구도(시점) 전환.
|
||||
|
||||
---
|
||||
|
||||
## 3. 완료 검증 기준 대조 결과 (8/8 충족)
|
||||
|
||||
| # | 완료 검증 기준 | 구현 및 검증 결과 | 판정 |
|
||||
|---|---|---|:---:|
|
||||
| 1 | 3단계 진입 시 암거본체가 기본 선택 상태로 표시된다. | `setStep(3)`에서 `selectStep3Structure('CULVERT', true)` 자동 호출 | **PASS** |
|
||||
| 2 | 철근을 선택하지 않으면 철근 상세 정보 창이 표시되지 않는다. | `#step3-rebar-detail-card` 기본 `display:none`, 철근 미선택 시 완전 은폐 | **PASS** |
|
||||
| 3 | 특정 날개벽에서 철근을 선택했을 때 다른 날개벽의 동일 번호 철근은 활성화되지 않는다. | `selectRebarMark(mark, wwId)`에서 `u.wingwallId === wwId && u.mark === mark`만 하이라이트, 타 부재는 dim(0.10) 처리 | **PASS** |
|
||||
| 4 | 날개벽을 변경하면 이전 날개벽의 철근 선택 상태가 해제되고 새 날개벽의 철근 정보가 표시된다. | `selectStep3Structure`에서 `hideRebarDetailCard()` 및 `clearRebarSelection()` 선행 호출 | **PASS** |
|
||||
| 5 | 모델 확대·축소 시 텍스트 크기가 일정하게 유지된다. | `animate()` 루프에서 거리 비례 스케일 동적 보정 (`dist * 0.040`) 적용 | **PASS** |
|
||||
| 6 | 모델 회전·이동 후 빈 바닥 영역을 클릭해도 모델의 시점이 초기화되지 않는다. | `onPointerDown`에서 빈 바닥 클릭 시 `clearRebarSelection()`만 호출하여 시점 100% 보존 | **PASS** |
|
||||
| 7 | 좌측 바에서 날개벽 이름을 클릭한 경우에만 해당 날개벽 기준으로 모델의 기본 구도가 변경된다. | 좌측 카드 클릭 이벤트에서만 `updateCamera=true` 전달하여 시점 전환 | **PASS** |
|
||||
| 8 | 좌측 바 및 우측 창의 항목 배치와 텍스트 크기가 위 요구사항대로 반영된다. | CSS 17.5px/18px 적용, 좌측 바 요약 제거 및 투시 제어 패널 이동 배치 완료 | **PASS** |
|
||||
|
||||
---
|
||||
|
||||
## 4. Git 형상 관리 이력
|
||||
|
||||
```text
|
||||
c1f67c6 feat(ui): 3단계 배근도 기반 3D 철근배근 UI/UX 및 날개벽별 철근 격리 개선
|
||||
573c0bc feat(ui): update Step 3 rebar modeling to vertical 2-column layout and interactive controls
|
||||
aa3ae54 feat(wsl2): add WSL2 execution script, automated test suite and documentation
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. 실행 서버 상태
|
||||
|
||||
- **가상환경**: WSL2 Ubuntu `~/.venv-3d-drawing` (Python 3.14)
|
||||
- **테스트**: `python test_pipeline.py` (6/6 전수 PASS, 0.319s)
|
||||
- **HTTP 상태**: `http://localhost:5000` (HTTP/1.1 200 OK)
|
||||
@@ -0,0 +1,71 @@
|
||||
# [실행] 2D CAD 도면 기반 3D 모델 변환 및 웹 뷰어 표출 시스템 구축 (2단계 외형 모델링 UI 개선)
|
||||
|
||||
| 버전 | 일자 | 작성자 | 변경 요약 |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| `v0.1.03` | 2026-10-22 | 사용자 (Agent) | 2단계 일반도 기반 3D 외형 모델링 UI 개선: 1) 좌측 바 불필요 테이블(적용 일반도, 평면도 부재 판별) 삭제, 2) '3D 구조물 선택' 날개벽 명칭 텍스트 1.5배(17.5px) 확대, 3) 메인창 상단 도면명/단계문구/조작안내문구/단면 0-0 표기 완전 삭제, 4) 2단계 초기 기본 선택 부재를 '암거본체'로 설정 및 날개벽 명칭만 표출, 5) 2단계·3단계 메인 화면 3D 모델 표시 크기 약 80% 바운딩 구 최적화 스케일링 일괄 적용 |
|
||||
| `v0.1.02` | 2026-10-22 | 사용자 (Agent) | 3단계 배근도 기반 3D 철근배근 UI 및 상호작용 개선 (날개벽별 철근 격리, 카메라 시점 보존, 텍스트 크기 고정 및 UI 재배치) |
|
||||
| `v0.1.01` | 2026-10-22 | 사용자 (Agent) | 3단계 UI 개편: 세로 2단 분할 레이아웃 적용, 부재 선택 시 3D 카메라 줌 및 선택 부재/철근 집중 표출 |
|
||||
| `v0.1.00` | 2026-10-21 | 사용자 (Agent) | 최초 작성: 2D DWG 도면 3D 변환 파이프라인, Three.js 웹 뷰어, WSL2 환경 연동 및 Git 형상 관리 구축 완료 |
|
||||
|
||||
---
|
||||
|
||||
## 1. 개요 및 배경
|
||||
|
||||
- **업무 명칭**: 2단계 일반도 기반 3D 외형 모델링 UI 개선 및 뷰포트 최적화
|
||||
- **작업 환경**: WSL2 (Ubuntu Linux), Python 3.14 (`~/.venv-3d-drawing`), Three.js WebGL
|
||||
- **코드 저장소**: `Code/3d-drawing/` (Git 형상 관리: Commit `fe6b09f`)
|
||||
- **실행 서버**: Flask 웹 서버 (`http://localhost:5000`)
|
||||
|
||||
---
|
||||
|
||||
## 2. 세부 수정 내역 및 구현 결과
|
||||
|
||||
### 2.1 좌측 바 UI 수정
|
||||
1. **불필요한 테이블 삭제**: 좌측 바의 ‘적용 일반도 정보 & 체적 요약’ (`#step2-general-dwg-card`) 및 ‘평면도 부재 판별 현황’ 패널을 완전 삭제.
|
||||
2. **구조물 선택 텍스트 1.5배 확대**: `.struct-card-step2-title`에 `font-size: 17.5px !important; font-weight: 700;`를 적용하여 날개벽 명칭 텍스트를 1.5배로 확대하고 '3D 구조물 선택'으로 섹션명을 통일.
|
||||
|
||||
### 2.2 우측 메인창 UI 및 기능 수정
|
||||
1. **불필요한 안내 텍스트 완전 제거**:
|
||||
- 뷰포트 상단 도면 탭(`#viewport-drawing-tabs`)을 2단계에서 숨김 처리(`display: none`).
|
||||
- 상단 스텝 뱃지(`[2단계: 일반도 전용 외형 모델]`) 삭제.
|
||||
- 메인 화면 오버레이 조작 안내(`좌클릭: 회전 | 우클릭: 이동 | 휠: 줌...`) 문구 완전 삭제.
|
||||
2. **초기 선택 구조물 '암거본체' 설정 및 단면 0-0 표기 삭제**:
|
||||
- 2단계 진입 시 `selectObject('CULVERT')`를 자동 호출하여 암거본체가 기본 선택되도록 설정.
|
||||
- 암거본체 선택 시 날개벽 구조물 명칭("종점부 좌측 날개벽", "종점부 우측 날개벽")만 3D 모델 위에 깔끔하게 표출.
|
||||
- "단면 A-A", "단면 B-B", "단면 C-C", "단면 D-D" 등 단면 0-0 텍스트 표기 및 EL 마커를 완전 미생성/삭제.
|
||||
3. **텍스트 크기 고정 (Screen-space Constant Size)**:
|
||||
- Three.js 렌더 루프(`animate()`)에서 카메라 거리에 비례하여 텍스트 스프라이트를 동적 스케일링(`dist * 0.040`). 휠 줌 조작 시에도 텍스트 크기가 일정하게 유지되어 모델 가림 방지.
|
||||
4. **메인 화면 모델링 크기 조정 (약 80% 화면 점유)**:
|
||||
- `fitView(coverage = 0.80)` 함수에서 3D 모델 전체 바운딩 구(Bounding Sphere)의 반경과 카메라 화각(FOV), 뷰포트 종횡비(Aspect)를 연립 계산하여 모델이 메인 화면 표시 영역의 약 80%를 안정적으로 차지하도록 카메라 거리를 정밀 산출.
|
||||
- 2단계와 3단계 모두 동일하게 80% 기준을 적용.
|
||||
|
||||
---
|
||||
|
||||
## 3. 완료 검증 기준 대조 결과 (5/5 전 항목 PASS)
|
||||
|
||||
| # | 완료 검증 기준 | 구현 및 검증 결과 | 판정 |
|
||||
|---|---|---|:---:|
|
||||
| 1 | 좌측 바에서 지정된 테이블 항목이 삭제되고, 날개벽 이름의 텍스트가 기존 대비 1.5배로 확대된다. | `#step2-general-dwg-card` 및 평면도 부재 판별 패널 삭제 완료. `.struct-card-step2-title`에 17.5px(1.5배) 적용 | **PASS** |
|
||||
| 2 | 메인창 상단의 도면명, 단계 안내 문구, 조작 안내 문구 및 단면 0-0 표기가 표시되지 않는다. | 뷰포트 상단 탭/뱃지 은폐, 오버레이 범례 공백 처리, 단면 A~D 텍스트 스프라이트 미생성 | **PASS** |
|
||||
| 3 | 2단계 진입 시 암거본체가 기본 선택 상태로 설정된다. | `setStep(2)`에서 `this.selectObject('CULVERT')` 호출 및 암거 카드 선택 활성화 | **PASS** |
|
||||
| 4 | 모델을 확대·축소해도 모델 위 텍스트의 크기가 일정하게 유지된다. | `animate()` 루프 내 거리 비례 스케일링(`dist * 0.040`)으로 화면상 텍스트 크기 불변 | **PASS** |
|
||||
| 5 | 2단계와 3단계 모두 초기 모델이 메인 화면 표시 영역의 약 80%를 차지하도록 표시된다. | `fitView(coverage = 0.80)` 기하학적 바운딩 구 기반 거리 계산을 2단계/3단계 공통 적용 | **PASS** |
|
||||
|
||||
---
|
||||
|
||||
## 4. Git 형상 관리 이력
|
||||
|
||||
```text
|
||||
fe6b09f feat(ui): 2단계 일반도 기반 3D 외형 모델링 UI 개선 및 80% 뷰포트 스케일링
|
||||
c1f67c6 feat(ui): 3단계 배근도 기반 3D 철근배근 UI/UX 및 날개벽별 철근 격리 개선
|
||||
573c0bc feat(ui): update Step 3 rebar modeling to vertical 2-column layout and interactive controls
|
||||
aa3ae54 feat(wsl2): add WSL2 execution script, automated test suite and documentation
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. 실행 서버 상태
|
||||
|
||||
- **가상환경**: WSL2 Ubuntu `~/.venv-3d-drawing` (Python 3.14)
|
||||
- **테스트**: `python test_pipeline.py` (6/6 전수 PASS, 0.291s)
|
||||
- **HTTP 응답**: `http://localhost:5000` (HTTP/1.1 200 OK)
|
||||
@@ -0,0 +1,85 @@
|
||||
# [실행] 2D CAD 도면 기반 3D 모델 변환 및 웹 뷰어 표출 시스템 구축 (2단계 날개벽 선택 및 치수 표출)
|
||||
|
||||
| 버전 | 일자 | 작성자 | 변경 요약 |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| `v0.1.04` | 2026-10-22 | 사용자 (Agent) | 2단계 날개벽 선택 및 3D 치수 표출 구현: 1) 암거 본체 선택 시 기존 정상 표시 유지, 2) 날개벽 선택 시 해당 날개벽 진하게 강조(1.0 + Emissive glow) 및 나머지 구조물 흐리게(0.18) 반투명 처리, 3) 선택된 날개벽에 시작단면 높이(H=3.70m), 종점단면 높이(H=1.50m), 날개벽 연장(L=4.35m/5.40m) 3D 치수선, 보조선, 끝단 틱 및 화면크기 고정 치수 라벨 동시 표출 |
|
||||
| `v0.1.03` | 2026-10-22 | 사용자 (Agent) | 2단계 일반도 기반 3D 외형 모델링 UI 개선: 좌측 바 테이블 삭제, 텍스트 1.5배 확대, 상단 탭/단계문구/조작안내/단면 0-0 삭제, 80% 뷰포트 스케일링 |
|
||||
| `v0.1.02` | 2026-10-22 | 사용자 (Agent) | 3단계 배근도 기반 3D 철근배근 UI 및 상호작용 개선 (날개벽별 철근 격리, 카메라 시점 보존, 텍스트 크기 고정 및 UI 재배치) |
|
||||
| `v0.1.01` | 2026-10-22 | 사용자 (Agent) | 3단계 UI 개편: 세로 2단 분할 레이아웃 적용, 부재 선택 시 3D 카메라 줌 및 선택 부재/철근 집중 표출 |
|
||||
| `v0.1.00` | 2026-10-21 | 사용자 (Agent) | 최초 작성: 2D DWG 도면 3D 변환 파이프라인, Three.js 웹 뷰어, WSL2 환경 연동 및 Git 형상 관리 구축 완료 |
|
||||
|
||||
---
|
||||
|
||||
## 1. 개요 및 배경
|
||||
|
||||
- **업무 명칭**: 2단계 UI 수정 및 날개벽 선택·모델링 동작(강조/흐림 대비 및 3D 치수선) 구현
|
||||
- **작업 환경**: WSL2 (Ubuntu Linux), Python 3.14 (`~/.venv-3d-drawing`), Three.js WebGL
|
||||
- **코드 저장소**: `Code/3d-drawing/` (Git 형상 관리: Commit `90a178a`)
|
||||
- **실행 서버**: Flask 웹 서버 (`http://localhost:5000`)
|
||||
|
||||
---
|
||||
|
||||
## 2. 세부 구현 내역
|
||||
|
||||
### 2.1 메인 화면 모델링 표시 및 암거 본체 선택 유지
|
||||
- 2단계 진입 시 기존 3D 모델링 표시 화면과 표시 방식을 그대로 유지.
|
||||
- 좌측 바에서 ‘암거 본체’를 클릭하거나 초기 진입 시:
|
||||
- 모든 구조물(암거 및 날개벽)을 100% 정상 불투명도와 고유 색상으로 표시.
|
||||
- 치수선은 깔끔하게 미표시하고, 날개벽 구조물 명칭("종점부 좌측 날개벽", "종점부 우측 날개벽")만 표출.
|
||||
|
||||
### 2.2 날개벽 선택 및 강조/흐림 시각적 위계 대비
|
||||
- 좌측 바에서 특정 날개벽(종점부 좌측/우측)을 클릭하면:
|
||||
- **선택된 날개벽**: 100% 불투명도 + 부재 고유 색상 + 부드러운 발광(`emissive: 0.30`) + 선명한 모서리(`edges opacity: 0.85`)로 **진하게 강조**.
|
||||
- **나머지 구조물(암거 본체 및 반대편 날개벽)**: 반투명(`opacity: 0.18`) + 슬레이트 그레이 색상으로 **흐리게 표시**하여, 전체 모델링의 상대적 위치와 형상을 완벽히 파악하면서도 선택 부재가 한눈에 부각되도록 처리.
|
||||
- 다른 날개벽을 클릭하면 즉시 이전 상태가 해제되고 새로 선택된 날개벽 기준으로 강조/흐림 대상이 실시간 갱신됨.
|
||||
|
||||
### 2.3 선택된 날개벽의 3D 치수 표출
|
||||
선택된 날개벽의 실제 3D 모델링 형상 및 설계 데이터(`modelData.objects`)와 100% 일치하는 3가지 주요 치수를 3D 뷰포트 내에 정밀하게 표시:
|
||||
1. **시작단면 높이**:
|
||||
- 좌/우 날개벽 암거 접합부(A-A / C-C 단면): $H = 3.70\text{ m}$ ($37.104\text{ m} - 33.404\text{ m}$)
|
||||
- 외측 법선 방향으로 0.55m 오프셋 배치.
|
||||
2. **종점단면 높이**:
|
||||
- 좌/우 날개벽 말단부(B-B / D-D 단면): $H = 1.50\text{ m}$ ($35.023\text{ m} - 33.523\text{ m}$)
|
||||
- 날개벽 진행 방향 외측으로 0.55m 오프셋 배치.
|
||||
3. **날개벽 연장**:
|
||||
- 종점부 좌측 날개벽: $L = 4.35\text{ m}$
|
||||
- 종점부 우측 날개벽: $L = 5.40\text{ m}$
|
||||
- 날개벽 상단 천단 경사선 상부(+Z 0.65m)에 오프셋 배치.
|
||||
4. **치수선 및 치수 라벨 규격**:
|
||||
- 시작점과 끝점을 잇는 주 치수선(Dimension Line).
|
||||
- 모델 모서리로부터 인출되는 보조선(Extension Line) 및 0.15m 오버슈트.
|
||||
- 치수 측정 방향과 양 끝단을 명확히 정의하는 끝단 틱 마커(End Ticks).
|
||||
- 줌 인/줌 아웃 시에도 화면상에서 일정한 픽셀 크기를 유지하는 동적 반응형 3D 스프라이트 치수값(`시작단면 H = 3.70m`, `종점단면 H = 1.50m`, `날개벽 연장 L = 4.35m/5.40m`).
|
||||
|
||||
---
|
||||
|
||||
## 3. 검증 결과 대조
|
||||
|
||||
| 요구 항목 | 요구사항 내용 | 구현 및 동작 검증 결과 | 판정 |
|
||||
|---|---|---|:---:|
|
||||
| 1. 메인 화면 모델링 표시 | 2단계 진입 시 기존 3D 모델링 화면과 표시 방식 유지 | 기존 모델링 뷰 및 Three.js 씬 구조 완전 유지 | **PASS** |
|
||||
| 2.1 암거 본체 선택 | 암거 본체 클릭 시 메인 화면에 암거 본체 및 전체 정상 표시 | 모든 구조물 불투명도 1.0, 치수선 해제, 날개벽 명칭 정상 표출 | **PASS** |
|
||||
| 2.2 날개벽 선택 | 선택 날개벽은 진하게, 나머지 구조물은 흐리게 구분 표시 | 선택 날개벽 emissive/1.0 진하게, 타 구조물 opacity 0.18 흐리게 | **PASS** |
|
||||
| 3.1 시작단면 높이 치수 | 날개벽 시작단면 높이 치수선 및 치수값 표출 | A-A/C-C 단면 $H = 3.70\text{ m}$ 치수선/보조선/라벨 표출 | **PASS** |
|
||||
| 3.2 종점단면 높이 치수 | 날개벽 종점단면 높이 치수선 및 치수값 표출 | B-B/D-D 단면 $H = 1.50\text{ m}$ 치수선/보조선/라벨 표출 | **PASS** |
|
||||
| 3.3 날개벽 연장 치수 | 날개벽 시작~종점 연장 길이 치수선 및 치수값 표출 | 좌 $L = 4.35\text{ m}$, 우 $L = 5.40\text{ m}$ 상단 치수선/라벨 표출 | **PASS** |
|
||||
| 4. 동시 및 갱신 동작 | 강조 및 치수 동시 표출, 부재 변경 시 갱신, 가시성 유지 | 부재 클릭 시 즉시 갱신, 이전 치수 자동 소멸 및 가시성 확보 | **PASS** |
|
||||
|
||||
---
|
||||
|
||||
## 4. Git 형상 관리 이력
|
||||
|
||||
```text
|
||||
90a178a feat(modeling): 2단계 날개벽 선택 시 강조/흐림 대비 및 주요 치수(시작고, 종점고, 연장) 3D 치수선 표출
|
||||
fe6b09f feat(ui): 2단계 일반도 기반 3D 외형 모델링 UI 개선 및 80% 뷰포트 스케일링
|
||||
c1f67c6 feat(ui): 3단계 배근도 기반 3D 철근배근 UI/UX 및 날개벽별 철근 격리 개선
|
||||
573c0bc feat(ui): update Step 3 rebar modeling to vertical 2-column layout and interactive controls
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. 실행 서버 상태
|
||||
|
||||
- **가상환경**: WSL2 Ubuntu `~/.venv-3d-drawing` (Python 3.14)
|
||||
- **테스트**: `python test_pipeline.py` (6/6 전수 PASS, 0.306s)
|
||||
- **HTTP 응답**: `http://localhost:5000` (HTTP/1.1 200 OK)
|
||||
@@ -0,0 +1,73 @@
|
||||
# [실행] 2D CAD 도면 기반 3D 모델 변환 및 웹 뷰어 표출 시스템 구축 (2단계 날개벽 치수선 및 치수 표기 개선)
|
||||
|
||||
| 버전 | 일자 | 작성자 | 변경 요약 |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| `v0.1.05` | 2026-10-22 | 사용자 (Agent) | 2단계 날개벽 치수선 및 치수 표기 개선: 1) 날개벽 연장 치수선 수평 방향 배치(경사/기울어짐 방지 및 $Z$ 높이 일치), 2) 치수값 사각형 테이블/박스 제거 및 투명 캔버스 적용, 3) 치수 설명 문구 삭제 및 `L=00.0m`, `H=00.0m` 간소화 표기, 4) 치수선, 보조선, 끝단 틱 및 치수값 전원 흰색(`0xffffff`) 통일 적용 |
|
||||
| `v0.1.04` | 2026-10-22 | 사용자 (Agent) | 2단계 날개벽 선택 및 3D 치수 표출 구현: 1) 암거 본체 선택 시 기존 정상 표시 유지, 2) 날개벽 선택 시 해당 날개벽 진하게 강조(1.0 + Emissive glow) 및 나머지 구조물 흐리게(0.18) 반투명 처리, 3) 선택된 날개벽에 시작단면 높이(H=3.70m), 종점단면 높이(H=1.50m), 날개벽 연장(L=4.35m/5.40m) 3D 치수선, 보조선, 끝단 틱 및 화면크기 고정 치수 라벨 동시 표출 |
|
||||
| `v0.1.03` | 2026-10-22 | 사용자 (Agent) | 2단계 일반도 기반 3D 외형 모델링 UI 개선: 좌측 바 테이블 삭제, 텍스트 1.5배 확대, 상단 탭/단계문구/조작안내/단면 0-0 삭제, 80% 뷰포트 스케일링 |
|
||||
| `v0.1.02` | 2026-10-22 | 사용자 (Agent) | 3단계 배근도 기반 3D 철근배근 UI 및 상호작용 개선 (날개벽별 철근 격리, 카메라 시점 보존, 텍스트 크기 고정 및 UI 재배치) |
|
||||
| `v0.1.01` | 2026-10-22 | 사용자 (Agent) | 3단계 UI 개편: 세로 2단 분할 레이아웃 적용, 부재 선택 시 3D 카메라 줌 및 선택 부재/철근 집중 표출 |
|
||||
| `v0.1.00` | 2026-10-21 | 사용자 (Agent) | 최초 작성: 2D DWG 도면 3D 변환 파이프라인, Three.js 웹 뷰어, WSL2 환경 연동 및 Git 형상 관리 구축 완료 |
|
||||
|
||||
---
|
||||
|
||||
## 1. 개요 및 배경
|
||||
|
||||
- **업무 명칭**: 2단계 UI 수정 – 날개벽 치수선 및 치수 표기 개선
|
||||
- **작업 환경**: WSL2 (Ubuntu Linux), Python 3.14 (`~/.venv-3d-drawing`), Three.js WebGL
|
||||
- **코드 저장소**: `Code/3d-drawing/` (Git 형상 관리: Commit `ec50cf7`)
|
||||
- **실행 서버**: Flask 웹 서버 (`http://localhost:5000`)
|
||||
|
||||
---
|
||||
|
||||
## 2. 세부 구현 내역
|
||||
|
||||
### 2.1 날개벽 연장 치수선 수평 방향 배치 (경사/기울어짐 방지)
|
||||
- **수평 치수 정의**: 날개벽의 시작단면과 종점단면 사이의 수평 투영 거리($L_{horiz} = \sqrt{\Delta X^2 + \Delta Y^2}$)를 연장으로 정의.
|
||||
- 종점부 좌측 날개벽: $L = 4.35\text{ m}$
|
||||
- 종점부 우측 날개벽: $L = 5.40\text{ m}$
|
||||
- **수평 치수선 기하 배치**:
|
||||
- 기존의 천단 경사면을 따라 기울어지던 경사 치수선을 전면 수정하여, 시작단면과 종점단면의 양 끝점 $Z$ 좌표를 동일한 기준 높이($z_{dim} = \max(Z_{start}, Z_{end}) + 0.60\text{ m}$)로 완전 수평화.
|
||||
- 보조선(Extension Line)은 각 단면 상단 모서리로부터 수직($+Z$ 방향)으로 올라와 수평 치수선과 직교하며, $0.15\text{ m}$ 오버슈트를 적용.
|
||||
- 수평 치수선 양 끝단에는 직교 방향($+Z$) 끝단 틱 마커를 배치하여 측정 기준점을 명확히 정의.
|
||||
|
||||
### 2.2 치수 표기 방식 간소화 및 사각형 테이블 제거
|
||||
- **사각형 테이블 박스 제거**: 치수값을 둘러싸고 있던 사각형 배경 필(fill)과 테두리(stroke) 박스를 완전히 삭제하고, 투명 캔버스에 순수 텍스트만 렌더링.
|
||||
- **불필요한 설명 문구 삭제**: ‘날개벽 연장’, ‘시작단면’, ‘종점단면’, ‘00단면’ 등의 수식어 문구를 모두 삭제.
|
||||
- **표준 간소화 포맷 적용**:
|
||||
- **연장:** `L=00.0m` (예: `L=4.35m`, `L=5.40m`)
|
||||
- **시작단면 높이:** `H=00.0m` (예: `H=3.70m`)
|
||||
- **종점단면 높이:** `H=00.0m` (예: `H=1.50m`)
|
||||
- 각 치수값은 해당 치수선(외측 0.32m 및 상단 0.28m) 중앙에 명확히 대응되도록 배치.
|
||||
|
||||
### 2.3 치수선 및 치수값 전원 흰색(White) 통일 적용
|
||||
- **치수선/보조선/틱**: `THREE.LineBasicMaterial({ color: 0xffffff, linewidth: 2 })`로 흰색 적용.
|
||||
- **치수값 텍스트**: `#ffffff` 흰색 텍스트로 치수선과 시각적 일관성 확보.
|
||||
- **가독성 외곽선 처리**: 3D 공간에서 배경(어두운 뷰포트) 및 모델(밝은 회색 콘크리트) 위에서도 흰색 글자가 또렷이 식별되도록 글자 자체에 미세하고 부드러운 다크 외곽선(`rgba(15, 23, 42, 0.90)`, `lineWidth: 3.5`)을 적용하여 사각형 박스 없이도 최고 수준의 가독성 확보.
|
||||
|
||||
### 2.4 기존 모델링 동작 및 가시성 보존
|
||||
- 2단계 진입 시 및 암거 본체 선택 시 기존 정상 표시(100% 솔리드) 동작 보존.
|
||||
- 날개벽 선택 시 해당 날개벽 진하게 강조(1.0 + Emissive glow), 타 구조물 흐리게(0.18 반투명) 동작 유지.
|
||||
- 2단계에서 날개벽 선택 시 모델 상단 구조물 명칭("종점부 좌측 날개벽")은 치수선과의 겹침을 방지하기 위해 자동 숨김 처리되고, 깔끔한 흰색 치수선과 치수값만 표시됨.
|
||||
|
||||
---
|
||||
|
||||
## 3. 완료 검증 결과 대조
|
||||
|
||||
| 요구 항목 | 요구사항 내용 | 구현 및 동작 검증 결과 | 판정 |
|
||||
|---|---|---|:---:|
|
||||
| 1. 날개벽 치수 표시 & 강조/흐림 유지 | 2단계 날개벽 클릭 시 치수 표출, 선택 날개벽 진하게, 타 부재 흐리게 유지 | 선택 부재 solid/emissive 진하게, 비선택 부재 opacity 0.18 흐리게 정상 유지 | **PASS** |
|
||||
| 2. 날개벽 연장 수평 치수선 | 경사 방향이 아닌 수평 방향으로 치수선 배치, 시작~종점 수평거리 산정 | $Z$ 높이 일치($\Delta Z = 0$) 수평 치수선 및 수평 투영거리($L=4.35\text{ m}, 5.40\text{ m}$) 표출 | **PASS** |
|
||||
| 3. 사각형 테이블 삭제 | 치수값을 둘러싼 사각형 테이블(배경 박스 및 테두리) 삭제 | 투명 캔버스 적용, 배경 박스/테두리 완전 삭제 완료 | **PASS** |
|
||||
| 4. 치수 설명 문구 삭제 | ‘날개벽 연장’, ‘시작단면’, ‘종점단면’ 등 문구 미표시 | 설명 문구 완전 삭제 | **PASS** |
|
||||
| 5. 간소화 치수 포맷 | 연장: `L=00.0m`, 높이: `H=00.0m` 형식만 사용 | `L=4.35m`/`L=5.40m`, 시작단면 `H=3.70m`, 종점단면 `H=1.50m` 정확히 표출 | **PASS** |
|
||||
| 6. 흰색 치수선 및 흰색 치수값 | 모든 치수선, 보조선, 틱 및 치수값을 흰색(`0xffffff`)으로 일관성 유지 | 치수선/보조선/틱 `0xffffff`, 치수값 `#ffffff` 흰색 통일 적용 | **PASS** |
|
||||
| 7. 모델링 데이터 기반 산정 | 임의 고정값 배제, 실제 3D 모델링 좌표로부터 치수 산출 | `sections_3d` 실제 3D 정점 좌표로부터 `Math.hypot`, `Math.abs`로 동적 산출 | **PASS** |
|
||||
|
||||
---
|
||||
|
||||
## 4. Git 형상 관리 이력
|
||||
|
||||
- **커밋 해시**: [`ec50cf7`](file:///e:/11.%202026%20PROJECT/30%20도면을%203D로%20구현/01%20대산당진_수로암거(STA13+611)_옹벽형날개벽/Code/3d-drawing)
|
||||
- **커밋 메시지**: `feat(viewer3d): 2단계 날개벽 치수선 수평화, 사각형 테이블 제거, 치수 표기 간소화(L=00.0m, H=00.0m) 및 흰색 적용`
|
||||
- **단위 테스트**: `python test_pipeline.py` 6/6 PASS (`Ran 6 tests in 0.280s, OK`)
|
||||
@@ -0,0 +1,60 @@
|
||||
# [실행] 2D CAD 도면 기반 3D 모델 변환 및 웹 뷰어 표출 시스템 구축 (상단바 S/W 제목 및 프로세스 텍스트 확대)
|
||||
|
||||
| 버전 | 일자 | 작성자 | 변경 요약 |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| `v0.1.06` | 2026-10-22 | 사용자 (Agent) | 공통 상단바(Header) UI 개선: 1) S/W 제목 텍스트(`h1`) 14px -> 21px (1.5배 확대) 및 서브타이틀 11px -> 16.5px (1.5배 확대), 2) 프로세스(Workflow Stepper) 단계 제목(`step-title`) 11px -> 16.5px (1.5배 확대) 및 서브설명(`step-sub`) 9px -> 13.5px (1.5배 확대), 3) 단계 번호 배지(28px) 및 헤더 높이(70px) 비율 균형 조정 |
|
||||
| `v0.1.05` | 2026-10-22 | 사용자 (Agent) | 2단계 날개벽 치수선 및 치수 표기 개선: 1) 날개벽 연장 치수선 수평 방향 배치, 2) 치수값 사각형 테이블 제거, 3) `L=00.0m`, `H=00.0m` 간소화 표기, 4) 치수선/값 흰색(White) 통일 |
|
||||
| `v0.1.04` | 2026-10-22 | 사용자 (Agent) | 2단계 날개벽 선택 및 3D 치수 표출 구현 (강조/흐림 대비 및 3대 치수 표출) |
|
||||
| `v0.1.03` | 2026-10-22 | 사용자 (Agent) | 2단계 일반도 기반 3D 외형 모델링 UI 개선 |
|
||||
| `v0.1.02` | 2026-10-22 | 사용자 (Agent) | 3단계 배근도 기반 3D 철근배근 UI 및 상호작용 개선 |
|
||||
| `v0.1.01` | 2026-10-22 | 사용자 (Agent) | 3단계 UI 개편: 세로 2단 분할 레이아웃 적용 |
|
||||
| `v0.1.00` | 2026-10-21 | 사용자 (Agent) | 최초 작성: 2D DWG 도면 3D 변환 파이프라인, Three.js 웹 뷰어 구축 |
|
||||
|
||||
---
|
||||
|
||||
## 1. 개요 및 배경
|
||||
|
||||
- **요청 사항**: 공통 상단바의 S/W 제목과 프로세스의 텍스트를 기존 대비 **1.5배**로 확대
|
||||
- **수정 대상 파일**:
|
||||
- [`Code/3d-drawing/static/css/style.css`](file:///e:/11.%202026%20PROJECT/30%20도면을%203D로%20구현/01%20대산당진_수로암거(STA13+611)_옹벽형날개벽/Code/3d-drawing/static/css/style.css)
|
||||
- [`Code/3d-drawing/index.html`](file:///e:/11.%202026%20PROJECT/30%20도면을%203D로%20구현/01%20대산당진_수로암거(STA13+611)_옹벽형날개벽/Code/3d-drawing/index.html)
|
||||
- **작업 환경**: WSL2 (Ubuntu Linux), Python 3.14 (`~/.venv-3d-drawing`), Three.js WebGL
|
||||
|
||||
---
|
||||
|
||||
## 2. 세부 수정 내역
|
||||
|
||||
### 2.1 상단바 S/W 제목 텍스트 1.5배 확대
|
||||
- **S/W 제목 (`.brand h1`)**:
|
||||
- 기존: `font-size: 14px;`
|
||||
- **수정**: `font-size: 21px;` (**1.5배 확대**)
|
||||
- 줄간격 `line-height: 1.2` 및 자간 `-0.3px` 적용으로 가독성 강화.
|
||||
- **S/W 부제목 (`.brand .header-subtitle`)**:
|
||||
- 기존: 인라인 `font-size: 11px;`
|
||||
- **수정**: `font-size: 16.5px;` (**1.5배 확대**)
|
||||
- **로고 아이콘 (`.brand .logo-icon`)**:
|
||||
- 기존 `32px × 32px` (폰트 15px)에서 확대된 제목과 어울리도록 `38px × 38px` (폰트 18px)로 비례 조정.
|
||||
|
||||
### 2.2 상단바 프로세스(Workflow Stepper) 텍스트 1.5배 확대
|
||||
- **단계 메인 제목 (`.step-title`)**:
|
||||
- 기존: `font-size: 11px;`
|
||||
- **수정**: `font-size: 16.5px;` (**1.5배 확대**)
|
||||
- **단계 보조 설명 (`.step-sub`)**:
|
||||
- 기존: `font-size: 9px;`
|
||||
- **수정**: `font-size: 13.5px;` (**1.5배 확대**)
|
||||
- **단계 번호 원형 배지 (`.step-num`)**:
|
||||
- 기존: `20px × 20px`, 폰트 `11px`
|
||||
- **수정**: `28px × 28px`, 폰트 `15px`로 텍스트 확대에 맞춰 비례 조정.
|
||||
- **단계 구분 화살표 (`.step-arrow`)**:
|
||||
- 기존: `font-size: 11px;`
|
||||
- **수정**: `font-size: 16.5px;` (**1.5배 확대**)
|
||||
- **상단바 전체 높이 (`header`)**:
|
||||
- 1.5배 확대된 텍스트와 프로세스 버튼이 여유 있게 배치되도록 `60px`에서 `70px`로 쾌적하게 확장.
|
||||
|
||||
---
|
||||
|
||||
## 3. 검증 및 형상 관리
|
||||
|
||||
- **단위 테스트**: `python test_pipeline.py` 6/6 PASS (`OK`)
|
||||
- **Git 커밋**: [`145030c`](file:///e:/11.%202026%20PROJECT/30%20도면을%203D로%20구현/01%20대산당진_수로암거(STA13+611)_옹벽형날개벽/Code/3d-drawing) (`style(header): 공통 상단바 S/W 제목(21px) 및 프로세스(16.5px/13.5px) 텍스트 1.5배 확대`)
|
||||
- **실서버 응답**: `http://localhost:5000` 정상 서비스 중 (HTTP 200 OK)
|
||||
@@ -0,0 +1,76 @@
|
||||
# [실행] 2D CAD 도면 기반 3D 모델 변환 및 웹 뷰어 표출 시스템 구축 (3단계 W1 철근 3D 형상 수정)
|
||||
|
||||
| 버전 | 일자 | 작성자 | 변경 요약 |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| `v0.1.07` | 2026-10-22 | 사용자 (Agent) | 3단계 W1 철근 3D 형상 수정: 1) 벽체와 저판이 만나는 접합부(`h_foot_top`)에서 발생하던 불필요한 꺾임 정점 및 오프셋(`+0.06m`) 제거, 2) 벽체 구간(`u_stem_front`)의 기존 방향을 그대로 직선 연장하여 저판 하면(`z_foot_bot + 0.016`)까지 연결, 3) 저판 하면에서만 1회 꺾이는 순수 ㄱ자(L-shape, 3정점) 형상으로 모델링 및 상세도 SVG 동기화 |
|
||||
| `v0.1.06` | 2026-10-22 | 사용자 (Agent) | 공통 상단바(Header) UI 개선: S/W 제목(`21px`) 및 프로세스(`16.5px`/`13.5px`) 텍스트 1.5배 확대 |
|
||||
| `v0.1.05` | 2026-10-22 | 사용자 (Agent) | 2단계 날개벽 치수선 및 치수 표기 개선: 연장 치수선 수평 배치, 사각형 테이블 제거, `L=00.0m`/`H=00.0m` 간소화 표기 및 흰색 통일 |
|
||||
| `v0.1.04` | 2026-10-22 | 사용자 (Agent) | 2단계 날개벽 선택 및 3D 치수 표출 구현 (강조/흐림 대비 및 3대 치수 표출) |
|
||||
| `v0.1.03` | 2026-10-22 | 사용자 (Agent) | 2단계 일반도 기반 3D 외형 모델링 UI 개선 |
|
||||
| `v0.1.02` | 2026-10-22 | 사용자 (Agent) | 3단계 배근도 기반 3D 철근배근 UI 및 상호작용 개선 |
|
||||
| `v0.1.01` | 2026-10-22 | 사용자 (Agent) | 3단계 UI 개편: 세로 2단 분할 레이아웃 적용 |
|
||||
| `v0.1.00` | 2026-10-21 | 사용자 (Agent) | 최초 작성: 2D DWG 도면 3D 변환 파이프라인, Three.js 웹 뷰어 구축 |
|
||||
|
||||
---
|
||||
|
||||
## 1. 개요 및 배경
|
||||
|
||||
- **업무 명칭**: 3단계 철근 3D 모델링 수정 – **W1 철근** 형상 수정
|
||||
- **문제 원인 분석**:
|
||||
- 기존 [`rebar_model.py`](file:///e:/11.%202026%20PROJECT/30%20도면을%203D로%20구현/01%20대산당진_수로암거(STA13+611)_옹벽형날개벽/Code/3d-drawing/rebar_model.py#L278-L285)에서 `w1_bars` 생성 시 4개의 정점(저판 하면 끝점 $\rightarrow$ 저판 하면 `u_stem_front + 0.06` $\rightarrow$ 벽체-저판 접합부 `h_foot_top`의 `u_stem_front` $\rightarrow$ 벽체 상단 `z_stem_top`의 `u_stem_front`)으로 구성되어 있었음.
|
||||
- 이로 인해 벽체와 저판이 만나는 접합부(`h_foot_top`)에서 저판 하면으로 내려갈 때 `+0.06m`만큼 횡방향 편차가 발생하여 접합부에서 한 번 꺾이고 저판 하면에서 또 한 번 꺾이는 이중 꺾임 현상이 나타남.
|
||||
- **수정 목표**:
|
||||
- 벽체와 저판이 만나는 접합부(`h_foot_top`)의 불필요한 꺾임을 제거.
|
||||
- 벽체 내부에 배근된 W1 철근의 긴 구간이 기존 방향(`u = sec['u_stem_front']`)을 그대로 유지한 직선으로 저판 하면까지 연장되도록 수정.
|
||||
- 오직 **저판 하면(`z = sec['z_foot_bot'] + 0.016`)에서만 1회 꺾이는 ㄱ자 형태**로 구현하고, 타 철근은 일절 변경하지 않음.
|
||||
|
||||
---
|
||||
|
||||
## 2. 세부 수정 내역
|
||||
|
||||
### 2.1 W1 철근 3D 폴리라인(Polyline) 기하 수정 ([`rebar_model.py`](file:///e:/11.%202026%20PROJECT/30%20도면을%203D로%20구현/01%20대산당진_수로암거(STA13+611)_옹벽형날개벽/Code/3d-drawing/rebar_model.py#L278-L285))
|
||||
- **수정 전 (4정점, 2회 꺾임)**:
|
||||
```python
|
||||
w1_bars.append([
|
||||
to_world(s, max(sec['u_toe_rebar'] + 0.02, sec['u_stem_front'] - 0.200), sec['z_foot_bot'] + 0.016),
|
||||
to_world(s, sec['u_stem_front'] + 0.06, sec['z_foot_bot'] + 0.016),
|
||||
to_world(s, sec['u_stem_front'], sec['h_foot_top']),
|
||||
to_world(s, sec['u_stem_front'], sec['z_stem_top'])
|
||||
])
|
||||
```
|
||||
- **수정 후 (3정점, 저판 하면 1회 꺾임 ㄱ자 형상)**:
|
||||
```python
|
||||
w1_bars.append([
|
||||
to_world(s, max(sec['u_toe_rebar'] + 0.02, sec['u_stem_front'] - 0.200), sec['z_foot_bot'] + 0.016),
|
||||
to_world(s, sec['u_stem_front'], sec['z_foot_bot'] + 0.016),
|
||||
to_world(s, sec['u_stem_front'], sec['z_stem_top'])
|
||||
])
|
||||
```
|
||||
- **정점 0 (저판 하면 끝단)**: 기존과 동일한 저판 하면 정착부 위치 유지 (`z = sec['z_foot_bot'] + 0.016`).
|
||||
- **정점 1 (저판 하면 유일 꺾임점)**: 벽체 내부 배근선(`u = sec['u_stem_front']`)이 직선 그대로 내려와 저판 하면(`z = sec['z_foot_bot'] + 0.016`)과 만나는 지점.
|
||||
- **정점 2 (벽체 상단 끝단)**: 기존과 동일한 벽체 상단 위치 유지 (`u = sec['u_stem_front']`, `z = sec['z_stem_top']`).
|
||||
- 접합부(`h_foot_top`) 중간 정점과 `+0.06` 오프셋을 제거하여 벽체 상단부터 저판 하면까지 **완벽한 단일 직선**으로 연결됨.
|
||||
|
||||
### 2.2 우측 상세 정보 창 W1 형상 다이어그램 및 번들 데이터 동기화
|
||||
- [`app.js`](file:///e:/11.%202026%20PROJECT/30%20도면을%203D로%20구현/01%20대산당진_수로암거(STA13+611)_옹벽형날개벽/Code/3d-drawing/static/js/app.js#L1273-L1284)의 `STEM_VERTICAL_FRONT` SVG 다이어그램도 1회만 꺾인 직선 ㄱ자 형태(`points="85,105 155,105 155,20"`)로 일치화.
|
||||
- `bundle_data.py`를 재실행하여 [`static/data/model_3d.js`](file:///e:/11.%202026%20PROJECT/30%20도면을%203D로%20구현/01%20대산당진_수로암거(STA13+611)_옹벽형날개벽/Code/3d-drawing/static/data/model_3d.js) 및 오프라인 번들 데이터를 갱신하고, WSL2 Flask 서버를 재기동하여 메모리 내 모델을 즉시 갱신.
|
||||
|
||||
---
|
||||
|
||||
## 3. 완료 검증 결과 대조
|
||||
|
||||
| 요구 항목 | 요구사항 내용 | 구현 및 동작 검증 결과 | 판정 |
|
||||
|---|---|---|:---:|
|
||||
| 1. 접합부 꺾임 제거 | 벽체와 저판이 만나는 접합부에서 철근이 꺾이지 않도록 수정 | `h_foot_top` 중간 정점 및 `+0.06` 편차 제거 완료 | **PASS** |
|
||||
| 2. 벽체 구간 직선 연장 | 벽체 내부 긴 부분의 기존 방향을 유지하여 직선으로 연장 | `u = sec['u_stem_front']` 일직선 유지 (`poly[1]`~`poly[2]` 수평 편차 0.0000m) | **PASS** |
|
||||
| 3. 저판 하면 1회 꺾임 | 저판 하면에서만 한 번 꺾이는 ㄱ자 형태로 모델링 | 총 3개 정점(2개 직선 선분, 저판 하면 1회 꺾임) 단위 테스트 검증 완료 | **PASS** |
|
||||
| 4. 저판 하면 구간 유지 | 저판 하면에 배근되는 철근 부분은 현재와 같이 유지 | 저판 하면 표고(`z_foot_bot + 0.016`) 및 앞굽 정착 길이 동일 유지 | **PASS** |
|
||||
| 5. 타 철근 형상 보존 | 다른 철근(C1~C2, F1~F9, K1~K2, S1~S3, W2~W9)은 변경하지 않음 | 타 철근 코드 및 좌표 100% 보존 (전체 508본 수량/중량 동일) | **PASS** |
|
||||
|
||||
---
|
||||
|
||||
## 4. Git 형상 관리 이력
|
||||
|
||||
- **커밋 해시**: [`af65700`](file:///e:/11.%202026%20PROJECT/30%20도면을%203D로%20구현/01%20대산당진_수로암거(STA13+611)_옹벽형날개벽/Code/3d-drawing)
|
||||
- **커밋 메시지**: `fix(rebar): 3단계 W1 철근 벽체-저판 접합부 불필요 꺾임 제거 및 저판 하면 1회 꺾임(ㄱ자 형상) 수정`
|
||||
- **단위 테스트**: `python test_pipeline.py` 6/6 PASS (`Ran 6 tests in 0.283s, OK`)
|
||||
@@ -0,0 +1,50 @@
|
||||
# [실행] 2D CAD 도면 기반 3D 모델 변환 및 웹 뷰어 표출 시스템 구축 (전체 코드 리팩토링 및 최적화)
|
||||
|
||||
| 버전 | 일자 | 작성자 | 변경 요약 |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| `v0.1.08` | 2026-10-22 | 사용자 (Agent) | 전체 코드 리팩토링(Refactoring): 1) 기존 기능·동작 로직 100% 동일 유지, 2) Three.js 치수선/텍스트 등록 로직 공통 헬퍼(`_renderDimensionEntry`) 추출, 3) Flask 분류 처리 공통 헬퍼(`_resolve_classification`) 추출 및 업로드 임시 파일 안전 해제(`try...finally`), 4) 미사용 import(`json`, `sys` 등) 및 미사용 변수(`is_start` 등) 제거, 5) 단위 테스트 ResourceWarning 해제 및 전 항목 PASS 검증 |
|
||||
| `v0.1.07` | 2026-10-22 | 사용자 (Agent) | 3단계 W1 철근 3D 형상 수정: 벽체-저판 접합부 불필요 꺾임 제거 및 저판 하면 1회 꺾임(ㄱ자 형상) 수정 |
|
||||
| `v0.1.06` | 2026-10-22 | 사용자 (Agent) | 공통 상단바 UI 개선: S/W 제목(21px) 및 프로세스(16.5px/13.5px) 텍스트 1.5배 확대 |
|
||||
| `v0.1.05` | 2026-10-22 | 사용자 (Agent) | 2단계 날개벽 치수선 및 치수 표기 개선 |
|
||||
| `v0.1.04` | 2026-10-22 | 사용자 (Agent) | 2단계 날개벽 선택 및 3D 치수 표출 구현 |
|
||||
| `v0.1.03` | 2026-10-22 | 사용자 (Agent) | 2단계 일반도 기반 3D 외형 모델링 UI 개선 |
|
||||
| `v0.1.02` | 2026-10-22 | 사용자 (Agent) | 3단계 배근도 기반 3D 철근배근 UI 및 상호작용 개선 |
|
||||
| `v0.1.01` | 2026-10-22 | 사용자 (Agent) | 3단계 UI 개편: 세로 2단 분할 레이아웃 적용 |
|
||||
| `v0.1.00` | 2026-10-21 | 사용자 (Agent) | 최초 작성: 2D DWG 도면 3D 변환 파이프라인, Three.js 웹 뷰어 구축 |
|
||||
|
||||
---
|
||||
|
||||
## 1. 리팩토링 개요 및 목적
|
||||
|
||||
- **원칙 준수**: 기존 모든 기능, API 인터페이스, 3D 모델링 기하학, UI 상호작용 로직은 **100% 동일하게 유지** (동작 변경 일절 없음).
|
||||
- **공통화 (DRY)**: 중복 생성되던 치수선 LineSegments 및 텍스트 Sprite 씬 등록 로직, Flask 도면 분류 로직 헬퍼화.
|
||||
- **클린 코드**: 미사용 모듈 import, 미사용 변수 제거 및 파일 핸들/임시 파일 리소스 누수 방지.
|
||||
|
||||
---
|
||||
|
||||
## 2. 세부 개선 내역
|
||||
|
||||
### 2.1 3D 웹 뷰어 치수선 공통화 ([`viewer3d.js`](file:///e:/11.%202026%20PROJECT/30%20도면을%203D로%20구현/01%20대산당진_수로암거(STA13+611)_옹벽형날개벽/Code/3d-drawing/static/js/viewer3d.js#L890-L935))
|
||||
- `createHorizontalDimension3D`와 `createDimension3D`에서 중복되던 BufferGeometry, LineSegments 생성, 재질 설정(`0xffffff`), 렌더 오더 부여 및 Sprite 배치 로직을 `_renderDimensionEntry(linePoints, spritePos, text)` 공통 헬퍼로 통합.
|
||||
- 중복 코드 약 30라인 감소 및 치수선 속성 수정 시 단일 진실 공급원(Single Source of Truth) 확보.
|
||||
|
||||
### 2.2 Flask 백엔드 서버 로직 정리 ([`app.py`](file:///e:/11.%202026%20PROJECT/30%20도면을%203D로%20구현/01%20대산당진_수로암거(STA13+611)_옹벽형날개벽/Code/3d-drawing/app.py#L1-L150))
|
||||
- **미사용 모듈 제거**: 모듈 레벨의 미사용 `import json` 제거.
|
||||
- **도면 분류 헬퍼 공통화**: `_resolve_classification(drawing_name, manual_type)` 헬퍼 함수를 신설하여 도면 분류 및 수동 오버라이드 객체 생성 로직 캡슐화.
|
||||
- **임시 파일 안전 해제**: `api_upload` 처리 중 업로드된 임시 파일이 디스크에 잔류하지 않도록 `finally` 구문에서 안전하게 자동 삭제(Unlink) 처리.
|
||||
|
||||
### 2.3 3D 솔리드 모델러 정리 ([`model_3d.py`](file:///e:/11.%202026%20PROJECT/30%20도면을%203D로%20구현/01%20대산당진_수로암거(STA13+611)_옹벽형날개벽/Code/3d-drawing/model_3d.py#L1-L130))
|
||||
- 미사용 `import json` 및 `get_wingwall_mesh` 내부의 미사용 로컬 변수 `is_start` 정리.
|
||||
- 필요한 경우 CLI 진입점(`if __name__ == '__main__':`) 내부에서만 모듈 로컬 임포트 수행.
|
||||
|
||||
### 2.4 CAD 파서 및 테스트 파이프라인 정리 ([`cad_parser.py`](file:///e:/11.%202026%20PROJECT/30%20도면을%203D로%20구현/01%20대산당진_수로암거(STA13+611)_옹벽형날개벽/Code/3d-drawing/cad_parser.py), [`test_pipeline.py`](file:///e:/11.%202026%20PROJECT/30%20도면을%203D로%20구현/01%20대산당진_수로암거(STA13+611)_옹벽형날개벽/Code/3d-drawing/test_pipeline.py))
|
||||
- `cad_parser.py`: 미사용 `import json` 제거.
|
||||
- `test_pipeline.py`: 미사용 `import sys` 제거, Flask `send_file('index.html')` 응답 객체의 명시적 `close()` 호출로 테스트 실행 시 출력되던 `ResourceWarning` 완전 해제 (경고 0건, 클린 패스).
|
||||
|
||||
---
|
||||
|
||||
## 3. 검증 및 형상 관리
|
||||
|
||||
- **단위 테스트**: `python test_pipeline.py` **6/6 PASS** (경고 0건, `Ran 6 tests in 0.304s, OK`)
|
||||
- **Git 커밋**: [`3cc9afe`](file:///e:/11.%202026%20PROJECT/30%20도면을%203D로%20구현/01%20대산당진_수로암거(STA13+611)_옹벽형날개벽/Code/3d-drawing) (`refactor: 전체 코드 정리, 중복 로직 헬퍼 공통화, 미사용 임포트/변수 제거 및 리소스 정리`)
|
||||
- **실서버 응답**: `http://localhost:5000` (HTTP 200 OK 정상 서비스 중)
|
||||
Reference in new issue
Block a user