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>
30 lines
1.3 KiB
HTML
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>
|