CMPlanning/viewer/index.html

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>대산2터널 본선 3D 모델</title>
<style>
:root{--bg:#f6f6f4;--fg:#1d1d1b;--panel:rgba(255,255,255,.93);--line:#d7d7d2;--accent:#2f6f6a}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#15171a;--fg:#e9e9e6;--panel:rgba(31,34,38,.93);--line:#3a3f46;--accent:#6fb7b0}}
:root[data-theme="dark"]{--bg:#15171a;--fg:#e9e9e6;--panel:rgba(31,34,38,.93);--line:#3a3f46;--accent:#6fb7b0}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:system-ui,"Noto Sans KR",sans-serif;overflow:hidden}
#app{position:fixed;inset:0}
#panel{position:absolute;left:12px;top:12px;width:290px;max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:13px;box-sizing:border-box}
#panel h1{font-size:15px;margin:0 0 6px;color:var(--accent)}
#panel h2{font-size:12px;margin:12px 0 4px;color:var(--accent)}
#panel label{display:flex;gap:6px;align-items:center;margin:3px 0;cursor:pointer}
#pats{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
#info{white-space:pre-wrap;font-size:12px;line-height:1.55;margin-top:10px;border-top:1px solid var(--line);padding-top:8px;min-height:3.2em}
#status{position:absolute;right:12px;bottom:12px;font-size:12px;background:var(--panel);padding:4px 8px;border-radius:6px;border:1px solid var(--line)}
</style>
<script type="importmap">
{"imports":{"three":"https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js","three/addons/":"https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"}}
</script>
</head>
<body>
<div id="app"></div>
<div id="panel">
  <h1>대산2터널 본선 3D 모델</h1>
  <div style="color:var(--fg);opacity:.75">측점 4+745 ~ 5+480 · 단위 m</div>
  <div style="display:flex;gap:6px;margin:6px 0 2px"><button id="viewAll" type="button">전체 보기</button><button id="viewStart" type="button">입구 (4+745) 보기</button></div>
  <h2>지보패턴 (라이닝·굴착 여유대)</h2>
  <div id="pats"></div>
  <h2>굴착 여유대</h2>
  <label><input type="checkbox" id="showExc" checked> 굴착 여유대 표시</label>
  <h2>구성요소</h2>
  <div id="comps"></div>
  <div id="info">구성요소를 클릭하면 정보가 표시됩니다.</div>
</div>
<div id="status">불러오는 중…</div>
<script type="module">
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const MODEL = '../model/tunnel_solids.glb';
const META = '../model/tunnel_solids_meta.json';
const status = document.getElementById('status');
const info = document.getElementById('info');
const patsEl = document.getElementById('pats');
const compsEl = document.getElementById('comps');
const showExc = document.getElementById('showExc');

const dark = matchMedia('(prefers-color-scheme: dark)').matches;
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
renderer.setSize(innerWidth, innerHeight);
document.getElementById('app').appendChild(renderer.domElement);
const scene = new THREE.Scene();
scene.background = new THREE.Color(dark ? 0x15171a : 0xf6f6f4);
const camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 0.1, 20000);
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
scene.add(new THREE.HemisphereLight(0xffffff, 0x556070, 1.0));
const sun = new THREE.DirectionalLight(0xffffff, 0.9);
sun.position.set(1, 2, 1);
scene.add(sun);
const fill = new THREE.DirectionalLight(0xffffff, 0.7);
fill.position.set(-1, -0.5, -1.2);
scene.add(fill);

const fmtSta = (m) => Math.floor(m / 1000) + '+' + String(Math.round(m % 1000)).padStart(3, '0');
const GROUP_NOTE = {
  '기층·인버트(가정)': '기층·인버트: 도면에 표현되지 않아 가정하여 생성한 형상',
  '공동구(가정)': '공동구 H/I 박스: 공동구로 가정하여 생성한 형상',
  '배수(측구)': '측구 및 배수관 (단면 도면 기준)',
  '노면(계획고)': '노면 (계획고 기준, 측점별 편경사 적용)',
  '시설한계(참조선)': '시설한계 50 mm 기준선 (참조용 선, 솔리드 아님)',
  '굴착면': '굴착 여유대 (R 7.402 m 기준)',
  '라이닝': '라이닝 (지보패턴별)'
};
const meshes = [];
let META_BY_ID = {};
let patternOn = {};
let groupOn = {};

function applyVisibility() {
  for (const m of meshes) {
    const d = m.userData;
    let v = true;
    if (d.pattern) v = !!patternOn[d.pattern];
    if (d.group === '굴착면') v = v && showExc.checked;
    if (d.group in groupOn) v = v && groupOn[d.group];
    m.visible = v;
  }
}
showExc.addEventListener('change', applyVisibility);

Promise.all([
  fetch(META).then((r) => r.json()),
  new Promise((res, rej) => new GLTFLoader().load(MODEL, res, undefined, rej))
]).then(([meta, gltf]) => {
  for (const c of meta.components) META_BY_ID[c.id] = c;
  const root = gltf.scene;
  scene.add(root);
  root.traverse((o) => {
    if (!o.isMesh) return;
    const c = META_BY_ID[o.name];
    o.userData = { id: o.name, group: c ? c.group : '', pattern: c && c.pattern ? c.pattern : null,
                   from: c ? c.from_sta : null, to: c ? c.to_sta : null, label: c ? c.label : o.name };
    o.geometry.computeVertexNormals();   // GLB normals from the exporter are not reliable for shading
    const rgb = c && c.color ? c.color : [200, 200, 200];
    o.material = new THREE.MeshStandardMaterial({ color: new THREE.Color(rgb[0] / 255, rgb[1] / 255, rgb[2] / 255),
      roughness: 0.75, metalness: 0.0, side: THREE.DoubleSide });
    if (o.userData.group === '굴착면') { o.material.transparent = true; o.material.opacity = 0.55; o.material.depthWrite = false; }
    meshes.push(o);
  });
  const box = new THREE.Box3().setFromObject(root);
  const c = box.getCenter(new THREE.Vector3());
  const s = box.getSize(new THREE.Vector3());
  const d = Math.max(s.x, s.y, s.z);
  const viewFrom = (center, dist) => {
    const dir = new THREE.Vector3(0.6, 0.45, 0.9).normalize();
    controls.target.copy(center);
    camera.position.copy(center).addScaledVector(dir, dist);
    camera.near = Math.max(dist / 2000, 0.05); camera.far = dist * 20; camera.updateProjectionMatrix();
  };
  const overview = () => viewFrom(c, d * 0.75);
  const focusStation = (sta) => {
    const bb = new THREE.Box3(); let any = false;
    for (const m of meshes) {
      if (m.userData.group === '라이닝' && m.userData.from <= sta && sta < m.userData.to) { bb.union(new THREE.Box3().setFromObject(m)); any = true; }
    }
    if (!any) return;
    const cc = bb.getCenter(new THREE.Vector3()), ss = bb.getSize(new THREE.Vector3());
    viewFrom(cc, Math.max(ss.x, ss.y, ss.z) * 2.2 + 12);
  };
  document.getElementById('viewAll').addEventListener('click', overview);
  document.getElementById('viewStart').addEventListener('click', () => focusStation(4745));
  overview();

  const pats = [...new Set(meta.components.filter((x) => x.pattern).map((x) => x.pattern))];
  for (const p of pats) {
    patternOn[p] = true;
    const lab = document.createElement('label');
    const cb = document.createElement('input');
    cb.type = 'checkbox'; cb.checked = true;
    cb.addEventListener('change', () => { patternOn[p] = cb.checked; applyVisibility(); });
    lab.append(cb, document.createTextNode(p));
    patsEl.appendChild(lab);
  }
  const groups = [['노면(계획고)', '노면(계획고)'], ['기층·인버트(가정)', '기층·인버트(가정)'], ['배수(측구)', '배수(측구)'], ['공동구(가정)', '공동구(가정)'], ['시설한계(참조선)', '시설한계 50 mm 참조선']];
  for (const [key, text] of groups) {
    groupOn[key] = key !== '시설한계(참조선)' ? true : true;
    const lab = document.createElement('label');
    const cb = document.createElement('input');
    cb.type = 'checkbox'; cb.checked = true;
    cb.addEventListener('change', () => { groupOn[key] = cb.checked; applyVisibility(); });
    lab.append(cb, document.createTextNode(text));
    compsEl.appendChild(lab);
  }
  applyVisibility();
  const nLin = meta.components.filter((x) => x.group === '라이닝').length;
  status.textContent = '로드 완료 · 지보패턴 구간 ' + nLin + '개';
}).catch((e) => {
  status.textContent = '로드 실패: HTTP 서버에서 여세요 (' + e.message + ')';
});

const ray = new THREE.Raycaster();
const ptr = new THREE.Vector2();
let downAt = null;
renderer.domElement.addEventListener('pointerdown', (e) => { downAt = [e.clientX, e.clientY]; });
renderer.domElement.addEventListener('pointerup', (e) => {
  if (!downAt || Math.hypot(e.clientX - downAt[0], e.clientY - downAt[1]) > 4) return;
  const r = renderer.domElement.getBoundingClientRect();
  ptr.set(((e.clientX - r.left) / r.width) * 2 - 1, -((e.clientY - r.top) / r.height) * 2 + 1);
  ray.setFromCamera(ptr, camera);
  const hit = ray.intersectObjects(meshes.filter((m) => m.visible), false)[0];
  if (!hit) return;
  const u = hit.object.userData;
  const head = u.group + (u.pattern ? '  ·  지보패턴 ' + u.pattern : '');
  const sta = u.from != null ? '\n측점  ' + fmtSta(u.from) + ' ~ ' + fmtSta(u.to) : '';
  const note = GROUP_NOTE[u.group] ? '\n' + GROUP_NOTE[u.group] : '';
  info.textContent = head + sta + note;
});

addEventListener('resize', () => {
  camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
});
renderer.setAnimationLoop(() => { controls.update(); renderer.render(scene, camera); });
</script>
</body>
</html>