38 lines
3.0 KiB
HTML
38 lines
3.0 KiB
HTML
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>집수정 DXF 3D 모델러</title>
|
|
<link rel="stylesheet" href="./src/styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
<!-- DXF input and model settings -->
|
|
<aside class="side">
|
|
<div class="brand"><div class="logo">3D</div><div><h1>집수정 DXF 모델러</h1><p>도면에서 웹 3D 모델 생성</p></div></div>
|
|
<div class="step">01 · DXF 입력</div>
|
|
<div class="drop" id="drop"><strong>DXF 파일을 여기에 놓으세요</strong><small>ASCII DXF · 파일은 브라우저 안에서 처리됩니다</small><label class="pick" for="file">파일 선택</label><input id="file" type="file" accept=".dxf,application/dxf"><div id="filename" class="fileline">선택된 파일 없음</div></div>
|
|
<div class="step">02 · 도면 레이어</div>
|
|
<div class="field"><label for="outline">평면 외곽선 레이어</label><select id="outline" disabled><option>DXF 파일을 먼저 선택하세요</option></select></div>
|
|
|
|
<div class="step">03 · 모델 치수</div>
|
|
<div class="grid2"><div class="field"><label for="height">벽체 높이 (mm)</label><input id="height" type="number" min="1" step="10" value="1200"></div><div class="field"><label for="thickness">바닥 두께 (mm)</label><input id="thickness" type="number" min="0" step="10" value="150"></div></div>
|
|
<label class="check"><input type="checkbox" id="autoHeight" checked> 단면 치수에서 높이·바닥 두께 자동 추출</label>
|
|
<button id="build" class="primary" disabled>3D 모델 생성</button>
|
|
<div id="status" class="status">DXF 파일을 선택해 시작하세요.</div>
|
|
<div id="parts" class="partslist hidden"><b>생성된 부재</b><div id="partRows"></div></div>
|
|
</aside>
|
|
<!-- Model preview and view controls -->
|
|
<main class="main">
|
|
<header class="top"><div><h2>모델 미리보기</h2><small id="meta">DXF를 입력하면 모델이 여기에 표시됩니다</small></div><div class="toolbar"><button class="secondary" id="reset" disabled>화면 맞춤</button><button class="secondary" id="export" disabled>모델 다운로드 · OBJ</button></div></header>
|
|
<section class="viewer"><div id="viewport"></div><div id="empty" class="empty"><div class="emptybox"><div class="emptyicon">⬡</div><h3>아직 생성된 모델이 없습니다</h3><p>왼쪽에서 DXF 파일을 선택하고 평면 외곽선 레이어를 지정한 뒤 모델을 생성하세요.</p></div></div><div id="badge" class="badge hidden">기준점 · (0, 0, 0)</div><div id="legend" class="legend hidden"><span></span>바닥판 + 벽체</div></section>
|
|
<footer class="footer"><span>마우스 드래그: 회전 · 휠: 확대/축소 · 우클릭 드래그: 이동</span><span id="footstatus">대기 중</span></footer>
|
|
</main>
|
|
</div>
|
|
<script src="./src/dxf.js" defer></script>
|
|
<script src="./src/obj-export.js" defer></script>
|
|
<script src="./src/main.js" defer></script>
|
|
</body>
|
|
</html>
|