2073af1d8e
- 철재스라트 15세그먼트 절곡 프로파일 상세 - 스크린형 4부재 구성 및 치수 라벨 체계 - 2D SVG 좌표계 및 3D Three.js 변환 매핑 - INDEX.md, README.md 등록
204 lines
7.5 KiB
Markdown
204 lines
7.5 KiB
Markdown
# 방화셔터 도면 — 가이드레일 렌더링
|
||
|
||
> **작성일**: 2026-03-16
|
||
> **상태**: 운영 중
|
||
> **파일**: `mng/resources/views/rd/fire-shutter-drawing/index.blade.php`
|
||
> **라우트**: `GET /rd/fire-shutter-drawing`
|
||
|
||
---
|
||
|
||
## 1. 개요
|
||
|
||
### 1.1 목적
|
||
|
||
방화셔터 가이드레일의 **2D 평면도(SVG)**와 **3D 렌더링(Three.js)**을 구현한다.
|
||
제품 유형(스크린형/철재스라트)에 따라 다른 프로파일을 렌더링하며, 각 부재(마감재, 본체, C형, 벽연형)의 절곡 치수를 시각화한다.
|
||
|
||
### 1.2 제품 유형별 차이
|
||
|
||
| 항목 | 스크린형 | 철재스라트 |
|
||
|------|---------|-----------|
|
||
| 본체 형상 | C채널 (lip-flange-sideWall-backWall) | 15세그먼트 절곡 프로파일 |
|
||
| 마감재 절곡 | 10-11-110-30-15-15-15 (J-hook) | 10-13-120-25-15 (상단) / +19-14-15 (하단) |
|
||
| 벽연결 부재 | ③ C형 30-45-30 + ④ D형 11-23-40-23-11 | ④ 벽연형 30-45-30 |
|
||
| 전체 치수 | depth × width (가변) | 130mm × 75mm |
|
||
|
||
---
|
||
|
||
## 2. 철재스라트 가이드레일
|
||
|
||
### 2.1 부재 구성
|
||
|
||
```
|
||
┌──────────────────────────────────────────────────┐
|
||
│ ① 마감재 SUS 1.2T (빨간색, 상/하 2장) │
|
||
│ ┌────────────────────────────────────────────┐ │
|
||
│ │ ② 본체 EGI 1.55T (회색, 15세그먼트 절곡) │ │
|
||
│ │ ┌──────────────────────────────────────┐ │ │
|
||
│ │ │ 개구부 (슬랫 통과 공간) │ │ │
|
||
│ │ └──────────────────────────────────────┘ │ │
|
||
│ └────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ ④ 벽연형 EGI 1.55T (갈색, ㄷ자 30-45-30) │
|
||
│ ■■■■■ ← 방화벽 │
|
||
└──────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 2.2 ② 본체 절곡 프로파일 (15세그먼트)
|
||
|
||
정석 도면 기준, 시작점 `(0, 60)`:
|
||
|
||
| Seg | 방향 | 치수(mm) | 좌표 | 설명 |
|
||
|-----|------|---------|------|------|
|
||
| 1 | 10→ | 10 | (0,60)→(10,60) | 좌측 립 |
|
||
| 2 | 60↑ | 60 | (0,60)→(0,0) | 좌측벽 상부 |
|
||
| 3 | 90→ | 90 | (0,0)→(90,0) | 상단 플랜지 |
|
||
| 4 | 21↓ | 21 | (90,0)→(90,21) | 상부 립 |
|
||
| 5 | 78← | 78 | (90,21)→(12,21) | **상부 내부 선반 (넓은)** |
|
||
| 6 | 30↓ | 30 | (12,21)→(12,51) | 내부 벽 |
|
||
| 7 | 43→ | 43 | (12,51)→(55,51) | **하부 내부 선반** |
|
||
| 8 | 15↓ | 15 | (55,51)→(55,66) | 스텝 하강 |
|
||
| 9 | 20→ | 20 | (55,66)→(75,66) | 스텝 수평 |
|
||
| 10 | 15↑ | 15 | (75,66)→(75,51) | 스텝 상승 |
|
||
| 11 | 15→ | 15 | (75,51)→(90,51) | 스텝 수평 |
|
||
| 12 | 21↓ | 21 | (90,51)→(90,72) | 하부 립 |
|
||
| 13 | 90← | 90 | (90,72)→(0,72) | 하단 플랜지 |
|
||
| 14 | 12↑ | 12 | (0,72)→(0,60) | 좌측벽 하부 |
|
||
| 15 | 10→ | 10 | (0,60)→(10,60) | 립 (Seg1과 겹침) |
|
||
|
||
> **핵심**: 내부 개구부(스텝 구조)가 **하부**(y=51~66)에 위치한다. 상부(y=21)에는 넓은 78mm 선반, 하부에는 43mm 선반 + 15-20-15-15 스텝이 배치된다.
|
||
|
||
### 2.3 ① 마감재 절곡 (SUS 1.2T)
|
||
|
||
**상단**: `10←lip + 13↓tab + 120→body + 25↓ + 15←`
|
||
**하단**: `10←lip + 13↑tab + 120→body + 25↑ + 19← + 14↓ + 15←`
|
||
|
||
### 2.4 ④ 벽연형 (EGI 1.55T)
|
||
|
||
ㄷ자 형태: `30(깊이) × 45(높이)`, 우측 열림. 본체 좌측에 위치, 세로 중앙 정렬.
|
||
|
||
---
|
||
|
||
## 3. 2D 평면도 (SVG) 구현
|
||
|
||
### 3.1 좌표계
|
||
|
||
```
|
||
X축: 깊이 (LEFT=벽/방화벽 → RIGHT=개구부/실내)
|
||
Y축: 높이 (TOP → BOTTOM)
|
||
스케일: sc = 4 (1mm = 4px)
|
||
```
|
||
|
||
### 3.2 본체 위치 계산
|
||
|
||
```javascript
|
||
const ox2 = w4x + w4depth + (7 + 0.75) * sc;
|
||
// ④ 벽연형 끝에서 7mm + 반두께(0.75mm) 간격
|
||
```
|
||
|
||
### 3.3 색상 체계
|
||
|
||
| 부재 | 색상 | HEX |
|
||
|------|------|-----|
|
||
| ② 본체 EGI | 회색 | `#4b5563` (fill) / `#94a3b8` (stroke) |
|
||
| ① 마감재 SUS | 빨간색 | `#ef4444` |
|
||
| ④ 벽연형 EGI | 갈색 | `#8b6c5c` |
|
||
|
||
### 3.4 치수 라벨
|
||
|
||
각 부재의 절곡 치수를 **해당 부재 색상**으로 표시한다:
|
||
- ② 본체: 회색(`#94a3b8`)으로 14개 세그먼트 치수
|
||
- ① 마감재: 빨간색(`#ef4444`)으로 상/하단 각 7개 치수
|
||
- ④ 벽연형: 갈색(`#8b6c5c`)으로 30 × 45
|
||
|
||
---
|
||
|
||
## 4. 3D 렌더링 (Three.js) 구현
|
||
|
||
### 4.1 좌표계 매핑
|
||
|
||
```
|
||
2D 평면도 → 3D Shape (ExtrudeGeometry)
|
||
──────────────────────────────────────────────
|
||
plan_y (높이 0→72) → X (0 → rw=75, 중앙 정렬)
|
||
plan_x (깊이 0→90) → Y (반전: Y = bYO + 90 - plan_x)
|
||
Y=0: 개구부/실내, Y=rd: 벽
|
||
```
|
||
|
||
### 4.2 본체 세그먼트 변환 헬퍼
|
||
|
||
```javascript
|
||
function bSeg(px, py, pw, ph) {
|
||
// 평면도 좌표 (px, py, pw, ph) → THREE.Shape 좌표
|
||
const x1 = bXO + py, x2 = bXO + py + ph;
|
||
const y1 = bYO + 90 - px - pw, y2 = bYO + 90 - px;
|
||
const s = new THREE.Shape();
|
||
s.moveTo(x1,y1); s.lineTo(x2,y1);
|
||
s.lineTo(x2,y2); s.lineTo(x1,y2); s.lineTo(x1,y1);
|
||
return s;
|
||
}
|
||
```
|
||
|
||
### 4.3 재질
|
||
|
||
| 부재 | Material | 속성 |
|
||
|------|----------|------|
|
||
| ② 본체 / ④ 벽연형 | `MeshStandardMaterial` | color: `0x64748b`, metalness: 0.5, roughness: 0.4 |
|
||
| ① 마감재 SUS | `MeshStandardMaterial` | color: `0x9ca3af`, metalness: 0.7, roughness: 0.25 |
|
||
|
||
### 4.4 배치
|
||
|
||
```javascript
|
||
// 좌측 레일: 셔터 중심에서 -hw 위치
|
||
railGroupL.position.set(-hw - rw/2, 0, rd/2);
|
||
// 우측 레일: scale.x = -1 (좌우 반전)
|
||
railGroupR.position.set(hw + rw/2, 0, rd/2);
|
||
```
|
||
|
||
---
|
||
|
||
## 5. 스크린형 가이드레일
|
||
|
||
### 5.1 부재 구성
|
||
|
||
| 부재 | 색상 | 절곡 치수 |
|
||
|------|------|----------|
|
||
| ② 가이드레일 EGI | 파란색 `#3b82f6` | lip-flange-sideWall-backWall (가변) |
|
||
| ① 마감재 SUS | 빨간색 `#ef4444` | 10-11-110-30-15-15-15 (J-hook) |
|
||
| ③ C형 EGI | 초록색 `#22c55e` | 30-45-30 |
|
||
| ④ D형 EGI | 주황색 `#f97316` | 11-23-40-23-11 |
|
||
|
||
### 5.2 치수 라벨
|
||
|
||
각 부재 색상에 맞춰 모든 절곡 치수를 `font-size="7"` 라벨로 표시한다.
|
||
|
||
---
|
||
|
||
## 6. 소스 코드 위치
|
||
|
||
| 함수/섹션 | 줄 번호 (대략) | 설명 |
|
||
|----------|-------------|------|
|
||
| 스크린형 2D 평면도 | ~830~1055 | SVG 렌더링 (bodySvg, bk3Svg, bk4Svg, trim1Svg) |
|
||
| 철재스라트 2D 평면도 | ~1058~1320 | SVG 렌더링 (② 본체 15세그먼트, ①, ④) |
|
||
| `renderGrFront()` | ~1330 | 정면도 SVG |
|
||
| `createRailGroup()` | ~2639 | 3D 가이드레일 생성 (스크린/철재 분기) |
|
||
| 철재 3D 프로파일 | ~2795~2816 | `bSeg()` 헬퍼로 15세그먼트 + ④ + ① |
|
||
|
||
---
|
||
|
||
## 7. 참조 자료
|
||
|
||
- 정석 도면: 가이드레일 본체 (EGI 1.55mm) 절곡도
|
||
- 치수: 90(상단) - 21(상부립) - 78(선반) - 30(내부벽) - 43(선반) - 15-20-15-15(스텝) - 21(하부립) - 90(하단) - 12(좌측하) - 10(립) - 60(좌측상)
|
||
|
||
---
|
||
|
||
## 관련 문서
|
||
|
||
- [R&D 메뉴 README](README.md) — R&D 전체 메뉴 구조
|
||
- [기획디자인 스토리보드](planning-design.md) — 블록 에디터
|
||
|
||
---
|
||
|
||
**최종 업데이트**: 2026-03-16
|