59 lines
2.0 KiB
HTML
59 lines
2.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width,initial-scale=1,maximum-scale=1"
|
|
>
|
|
<title>Depth Viewer</title>
|
|
<link rel="stylesheet" href="../style/threeStyle.css">
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"three": "../vendor/three.module.min.mjs"
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<main id="viewer" aria-label="Interactive depth-map preview">
|
|
<div id="canvas-container"></div>
|
|
<div id="status" role="status" aria-live="polite">Waiting for output…</div>
|
|
<div id="error" role="alert" hidden></div>
|
|
|
|
<section class="toolbar" aria-label="Depth viewer controls">
|
|
<label>
|
|
Frame
|
|
<select id="batch-select" disabled></select>
|
|
</label>
|
|
<label class="range-control">
|
|
Depth
|
|
<input
|
|
id="depth-scale"
|
|
type="range"
|
|
min="-5"
|
|
max="5"
|
|
step="0.05"
|
|
value="2"
|
|
>
|
|
<output id="depth-value">2.00</output>
|
|
</label>
|
|
<button id="reset-camera" type="button">Reset view</button>
|
|
<button id="screenshot" type="button">PNG</button>
|
|
<label>
|
|
Mesh
|
|
<select id="export-format">
|
|
<option value="glb">GLB</option>
|
|
<option value="gltf">GLTF</option>
|
|
<option value="obj">OBJ</option>
|
|
</select>
|
|
</label>
|
|
<button id="export-mesh" type="button" disabled>Export</button>
|
|
</section>
|
|
</main>
|
|
|
|
<script type="module" src="../js/threeVisualizer.mjs"></script>
|
|
</body>
|
|
</html>
|