Files

김보곤 2073af1d8e docs: [rd] 방화셔터 가이드레일 SVG/3D 렌더링 기술문서 추가

- 철재스라트 15세그먼트 절곡 프로파일 상세
- 스크린형 4부재 구성 및 치수 라벨 체계
- 2D SVG 좌표계 및 3D Three.js 변환 매핑
- INDEX.md, README.md 등록

2026-03-16 21:08:48 +09:00

7.5 KiB

Raw Blame History

방화셔터 도면 — 가이드레일 렌더링

작성일: 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 본체 위치 계산

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 본체 세그먼트 변환 헬퍼

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 배치

// 좌측 레일: 셔터 중심에서 -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(좌측상)

7.5 KiB Raw Blame History Unescape Escape