jiang
d013f34493
Whole-file loading still failed after adding caching because the public proxy interrupted large GLB response bodies. Download validated 1 MiB ranges, retry transient failures up to three attempts, and persist completed chunks so reloads resume from their last boundary. Add regression cases observed failing before the change for interrupted downloads, cross-reload resume, and temporary HTTP failures. Verify range integrity, full-cache reuse, permanent errors, and storage fallback.
44 lines
3.2 KiB
HTML
44 lines
3.2 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>湛江北站供水系统三维渲染器</title>
|
|
<style>
|
|
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#e2e8e9}
|
|
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
|
|
canvas{display:block;width:100%;height:100%;touch-action:none}
|
|
#boot{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:16px;box-sizing:border-box;color:#334155;background:rgba(241,245,249,.38)}
|
|
#boot[hidden]{display:none}
|
|
.boot-panel{box-sizing:border-box;width:min(100%,360px);padding:24px;border-radius:16px;background:linear-gradient(135deg,rgba(255,255,255,.50),rgba(224,239,250,.28));backdrop-filter:blur(24px) saturate(170%) contrast(94%);-webkit-backdrop-filter:blur(24px) saturate(170%) contrast(94%);box-shadow:inset 0 1px 0 rgba(255,255,255,.88),inset 0 -1px 0 rgba(112,145,168,.18),0 18px 50px rgba(15,43,69,.20),0 0 0 1px rgba(255,255,255,.55)}
|
|
.boot-heading{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:#0f172a}
|
|
#boot i{flex:none;width:18px;height:18px;border:2px solid rgba(37,125,212,.22);border-top-color:#257dd4;border-radius:50%;animation:spin .8s linear infinite}
|
|
#boot-detail{margin:12px 0 0;font-size:12px;line-height:1.75;overflow-wrap:anywhere}
|
|
#boot-progress{display:block;width:100%;height:6px;margin-top:20px;accent-color:#2563eb}
|
|
#boot-progress[hidden],#boot-retry[hidden]{display:none}
|
|
#boot-retry{min-height:40px;margin-top:16px;padding:0 16px;border:0;border-radius:8px;background:#2563eb;color:white;font:inherit;font-size:13px;cursor:pointer;transition:transform 150ms ease,background-color 150ms ease}
|
|
#boot-retry:hover{background:#1d4ed8}#boot-retry:active{transform:scale(.96)}#boot-retry:focus-visible{outline:2px solid #2563eb;outline-offset:3px}
|
|
#boot[data-state=error] i{animation:none;border-color:#dc2626;background:#fee2e2}
|
|
#boot[data-state=error] #boot-title{color:#991b1b}
|
|
@keyframes spin{to{transform:rotate(360deg)}}
|
|
@media(prefers-reduced-motion:reduce){#boot i{animation:none;border-top-color:rgba(37,125,212,.22)}#boot-retry{transition:none}}
|
|
</style>
|
|
<script type="importmap">{"imports":{"three":"./vendor/three/three.module.js","three/addons/":"./vendor/three/addons/"}}</script>
|
|
</head>
|
|
<body>
|
|
<div id="boot" role="status" aria-live="polite" aria-busy="true" data-state="loading">
|
|
<div class="boot-panel">
|
|
<div class="boot-heading"><i aria-hidden="true"></i><span id="boot-title">正在准备三维场景</span></div>
|
|
<p id="boot-detail">首次载入需要下载模型，后续将优先使用本地缓存。</p>
|
|
<progress id="boot-progress" aria-label="场景资源加载进度"></progress>
|
|
<button id="boot-retry" type="button" hidden>重新载入场景</button>
|
|
</div>
|
|
</div>
|
|
<output id="qa" hidden></output>
|
|
<script type="module">
|
|
import {failLoading} from './loadingProgress.mjs?v=36-resumable-cache';
|
|
import('./preview.mjs?v=36-resumable-cache').catch(failLoading);
|
|
</script>
|
|
</body>
|
|
</html>
|