tdc_engineer/wingwall_3D_drawing
14
0 Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): update Step 3 rebar modeling to vertical 2-column layout and interactive controls

Browse Source
This commit is contained in:
Antigravity Agent committed 2026-10-22 09:40:03 +09:00
1 parent aa3ae545fd
commit 573c0bca11
4 files changed
+691 -360
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

index.html
+94 -52
View File
@@ -167,67 +167,31 @@
</div>
</div>
<!-- [STEP 3 LEFT SIDEBAR] 3단계: 배근도를 이용한 날개벽 내부 철근 배근 -->
<!-- [STEP 3 LEFT SIDEBAR] 3단계: 배근도 기반 3D 철근 배근 (세로 2단 심플 UI) -->
<div class="step-sidebar-pane" id="left-pane-step-3">
<div class="sidebar-header-banner step3-banner">
<div style="font-weight:700; font-size:12px;">3단계: 배근도 기반 날개벽 3D 철근 배근</div>
<div style="font-size:10px; color:var(--text-secondary); margin-top:2px;" id="step3-source-summary">
배근도/구조도를 이용하여 날개벽 내부에 철근을 배근합니다.
</div>
<div class="step2-header-simple">
<h2>3단계: 배근도 기반 3D 철근 배근</h2>
</div>
<div class="sidebar-tabs">
<button class="tab-btn active" data-tab="tab-rebar-filter">배근도 & 부위필터</button>
<button class="tab-btn" data-tab="tab-rebar-marks" id="tab-rebar-marks-btn">철근 기호</button>
<button class="tab-btn" data-tab="tab-rebar-diag">수량 & 품질검증</button>
</div>
<div class="step2-content-simple" style="gap:10px;">
<!-- 3.1 적용 배근도/구조도 요약 정보 바 -->
<div id="step3-rebar-summary-card"></div>
<div class="tab-content active" id="tab-rebar-filter">
<div class="panel-section">
<h3><span>적용된 배근도/구조도</span><span class="badge" style="background:rgba(16,185,129,0.18); color:#34d399;">배근도</span></h3>
<div id="step3-rebar-dwgs-list"></div>
</div>
<div class="panel-section">
<h3>대상 날개벽 필터</h3>
<div class="mini-filter-tabs" id="step3-ww-filter">
<button class="mini-tab active" data-ww="ALL" id="btn-ww-filter-all">전체</button>
<button class="mini-tab" data-ww="WW_END_LEFT" id="btn-ww-filter-left">종점 좌</button>
<button class="mini-tab" data-ww="WW_END_RIGHT" id="btn-ww-filter-right">종점 우</button>
<!-- 3.2 3D 구조물 선택 패널 (암거 및 도면상 실제 날개벽 2개소) -->
<div class="panel-section" style="flex:1; display:flex; flex-direction:column; min-height:0; margin-bottom:0; padding:10px;">
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;">
<h3 style="margin:0; font-size:12px;">3D 구조물 선택</h3>
<span style="font-size:10px; color:var(--text-muted);">부재 클릭 시 해당 부재 및 철근 집중</span>
</div>
<div id="step3-structures-list" class="step2-structures-scroll" style="gap:6px;"></div>
</div>
<div class="panel-section">
<h3>직경별 표시 제어</h3>
<div id="step3-dia-filters" class="layer-list"></div>
</div>
<div class="panel-section">
<h3>부위별 표시 제어</h3>
<div id="step3-zone-filters" class="layer-list"></div>
</div>
</div>
<div class="tab-content" id="tab-rebar-marks">
<div class="panel-section">
<h3><span>기호별 3D 철근</span><span style="font-size:10px; color:var(--text-muted);">클릭 시 하이라이트</span></h3>
<div id="step3-marks-list"></div>
</div>
</div>
<div class="tab-content" id="tab-rebar-diag">
<div class="panel-section">
<h3>철근 총괄 집계 (SD400 / fy=500MPa)</h3>
<div class="meta-grid" id="rebar-weight-summary"></div>
<button class="btn btn-primary btn-sm" style="width:100%; justify-content:center; margin-top:8px;" onclick="window.app.openBomModal()">
📊 전체 철근 재료표(BOM) 열기
<!-- 3.3 하단 2단계 이동 버튼 -->
<div style="margin-top:auto; padding-top:4px;">
<button class="btn btn-sm" style="width:100%; justify-content:center; padding:8px; font-size:11.5px;" id="btn-backto-step2">
⮜ 2단계: 외형 모델링으로 돌아가기
</button>
</div>
<div class="panel-section">
<h3>배근 품질 검증</h3>
<div id="rebar-diag-list"></div>
</div>
</div>
</div>
@@ -247,6 +211,84 @@
<div class="view-pane" id="viewport-3d" style="display:none;">
<div class="viewport-overlay" id="overlay-3d-legend"></div>
<!-- Step 3 Right HUD: Rebar Controls & Floating Detail Card -->
<div class="step3-right-hud" id="step3-right-hud" style="display:none;">
<!-- 3.2 철근 기호 상세 제원 창 (철근 선택 시에만 표시되는 플로팅 창) -->
<div class="step3-rebar-detail-card" id="step3-rebar-detail-card" style="display:none;">
<div class="card-header">
<div style="display:flex; align-items:center; gap:6px;">
<span id="step3-detail-title" style="font-weight:700; font-size:12px;">철근 상세 제원</span>
<span id="step3-detail-badge" class="badge" style="font-size:10px;">H16</span>
</div>
<button class="btn-close-sm" id="btn-close-rebar-detail" title="닫기">✕</button>
</div>
<div class="card-body" id="step3-rebar-detail-body">
<!-- SVG shape, dimensions, count, weight rendered dynamically -->
</div>
</div>
<!-- 3.3 & 3.4 3D 철근 투시·표현 제어 및 재료표·내보내기 우측 패널 -->
<div class="step3-ctrl-card" id="step3-ctrl-card">
<div class="card-header" style="cursor:pointer;" id="step3-ctrl-header">
<span style="font-weight:700; font-size:11.5px; display:flex; align-items:center; gap:5px;">
<span>⚙️</span> 3D 철근 투시 및 표현 제어
</span>
<span id="step3-ctrl-toggle-icon" style="font-size:11px; color:var(--text-muted);">▾</span>
</div>
<div class="card-body" id="step3-ctrl-body">
<!-- 3.3 투시 및 표현 제어 -->
<div class="ctrl-subgroup">
<div class="ctrl-row">
<span class="ctrl-label">콘크리트 반투명(X-Ray)</span>
<input type="range" id="step3-slider-opacity" min="0.05" max="0.9" step="0.05" value="0.30" class="mini-slider">
<span id="step3-opacity-val" class="ctrl-val">30%</span>
</div>
<div class="ctrl-row">
<span class="ctrl-label">철근 굵기 강조</span>
<input type="range" id="step3-slider-scale" min="1.0" max="3.0" step="0.2" value="1.6" class="mini-slider">
<span id="step3-scale-val" class="ctrl-val">1.6x</span>
</div>
</div>
<div class="ctrl-subgroup">
<div style="font-size:11px; font-weight:600; color:var(--text-secondary); margin-bottom:2px;">직경별 표시 제어</div>
<div class="dia-pill-group" id="step3-dia-pill-group">
<button class="dia-pill active" data-dia="ALL">전체</button>
<button class="dia-pill active" data-dia="H19" style="--c:#f43f5e;"><span class="dot"></span>H19</button>
<button class="dia-pill active" data-dia="H16" style="--c:#38bdf8;"><span class="dot"></span>H16</button>
<button class="dia-pill active" data-dia="H13" style="--c:#10b981;"><span class="dot"></span>H13</button>
</div>
</div>
<div class="ctrl-subgroup">
<div style="font-size:11px; font-weight:600; color:var(--text-secondary); margin-bottom:2px;">부위별 표시 제어</div>
<div class="zone-pill-group" id="step3-zone-pill-group">
<button class="zone-pill active" data-zone="우각부">우각부</button>
<button class="zone-pill active" data-zone="벽체">벽체</button>
<button class="zone-pill active" data-zone="저판">저판</button>
<button class="zone-pill active" data-zone="헌치">헌치</button>
</div>
</div>
<!-- 3.4 철근 재료표 및 3D 배근 내보내기 -->
<div class="ctrl-subgroup export-subgroup" style="margin-top:4px; border-top:1px solid var(--border-color); padding-top:8px;">
<div style="font-size:11px; font-weight:600; color:var(--text-secondary); margin-bottom:5px;">철근 재료표 및 내보내기</div>
<button class="btn btn-primary btn-sm" id="btn-step3-open-bom" style="width:100%; justify-content:center; margin-bottom:6px; font-size:11.5px; padding:6px 10px;">
📊 전체 철근 재료표 (BOM) 보기
</button>
<div class="export-btn-grid" style="display:grid; grid-template-columns:1fr 1fr; gap:5px;">
<button class="btn btn-sm" onclick="window.app.exportModel('csv')" style="font-size:10.5px; padding:5px;">📥 재료표 CSV</button>
<button class="btn btn-sm" onclick="window.app.exportModel('obj')" style="font-size:10.5px; padding:5px;">📦 OBJ 솔리드</button>
<button class="btn btn-sm" onclick="window.app.exportModel('stl')" style="font-size:10.5px; padding:5px;">🖨 3D STL</button>
<button class="btn btn-sm" onclick="window.app.exportModel('dxf')" style="font-size:10.5px; padding:5px;">📐 3D DXF</button>
</div>
</div>
</div>
</div>
</div>
<div class="viewport-controls-bottom">
<button class="view-hud-btn" id="btn-fit-3d" title="카메라 위치를 모델 전체에 맞춤">⛶ 전체 보기</button>
<button class="view-hud-btn" onclick="window.app.viewer3d.camera.position.set(16, 10, 36); window.app.viewer3d.controls.update();">정면 뷰</button>