Files
dwg-dxf-viewer-sample/index.html
T
kimminsungandClaude Opus 4.8 a71790070d feat: multi-format 3D viewer with large-file OBJ streaming, Z-up, projection/outline UI
Three.js viewer supporting glb/gltf/obj/fbx/dae/ifc/ply via both server (SSR)
and drag&drop (CSR) paths.

- Streaming OBJ parser (src/viewer/objStream.ts) for files past the V8 max
  string length (>~1GB text) that OBJLoader can't handle; indexed geometry,
  per-vertex color from MTL Kd, float64 recenter baked in.
- In-viewer float64 recenter (objRecenter.ts) for huge CAD/survey coordinates
  (~1e8) so float32 vertex buffers keep precision (no cracked faces).
- Z-up right-handed world; Y-up formats rotated on load.
- OBJ+MTL+texture drag&drop (LoadingManager URL-modifier maps dropped images).
- OrbitControls ground-plane panning (road/rail alignment workflow).
- UI: Zoom Fit, perspective/orthographic toggle, feature-edge outline.
- DoubleSide for CAD OBJ; PLY mesh + point-cloud support.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-19 13:54:46 +09:00

30 lines
1.3 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>hmwebviewer — 3D Viewer</title>
<link rel="stylesheet" href="/src/style.css" />
</head>
<body>
<div id="app">
<!-- SSR placeholder: pre-rendered 360 WebP fades out on hydration -->
<img id="preview" class="preview hidden" alt="3D preview placeholder" />
<div id="viewer" class="viewer"></div>
<div id="controls" class="controls">
<button id="btn-fit" type="button">Zoom Fit</button>
<button id="btn-persp" type="button" class="active">원근뷰</button>
<button id="btn-ortho" type="button">직교뷰</button>
<button id="btn-outline" type="button">테두리</button>
</div>
<div id="progress" class="progress hidden"><div class="bar"></div></div>
<div id="dropzone" class="dropzone">
<p>Drop a <strong>.glb .gltf .obj .fbx .dae .ifc .ply</strong> (+ .mtl) here, or click to browse</p>
<p id="status" class="status"></p>
<input id="file-input" type="file" accept=".glb,.gltf,.obj,.fbx,.dae,.ifc,.ply,.mtl" multiple hidden />
</div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>