3D 模型查看器
惰性加载：首屏 0 字节 3D 引擎，点了才下载。 这是 确定的三条硬要求之一（「体积和加载一定要快」）。
试试看：小狐狸
先别急着点按钮 —— 打开开发者工具的 Network 面板，
首屏不会有 three.js。点下去才出现
three.min.js GLTFLoader.js OrbitControls.js。
发布包里没有下面这些资源 —— vendor/（引擎与两个 loader）
和 models/（.glb 模型）都在 package.json 的
files 排除名单里（592KB 体积，且那两个 loader 是 ES6 class，
与「JS 一律 ES5」冲突）。
⇒ 直接打开本页看到的是降级 UI，这是预期行为，不是坏了；
想看真效果，请自行放好这三个文件，或用下方 URL 参数逐条复现降级路径。
为什么是这样设计的
| 要求 | 做法 |
|---|---|
| 首屏要快 | 3D 引擎点击后才 <script> 注入，
首屏 0 KB；模型走 XHR 以便显示真实进度 |
| 绝不能白屏 | WebGL 不支持 / 库没来 / 模型 404 / 解析失败 —— 四种失败全部给中文提示 + 重试按钮 |
| 视觉统一 | 颜色、圆角、间距全部走 var(--*)，换主题跟着变 |
| iOS 手感 | touch-action: none 让拖动不触发页面滚动；
关掉 tap highlight；页面切后台停止渲染省电 |
边界（本库不做什么）
- 不把 three.js 打包成本库的依赖 —— 592KB 违背「零依赖」；而且素材里那两个 loader 是 ES6， 与「JS 一律 ES5」冲突（精简档 的 WebView 会直接语法错误）。
- 精简档（某项目）不做 3D —— WebGL 在老 WebView 上大概率不可用。 本组件会检测并给出明确提示，不会白屏。
- 不自己手搓 glTF 解析器 —— 用成熟的 GLTFLoader。
体积现状
| 文件 | 体积 | 何时加载 |
|---|---|---|
model-viewer.js（本库） | ~9 KB | 首屏 |
models/fox.glb | 159 KB | 点击后（可 XHR 显示进度） |
vendor/three.min.js | 589 KB | 点击后 |
vendor/GLTFLoader.js | 94 KB | 点击后 |
vendor/OrbitControls.js | 26 KB | 点击后 |
⭐ 首屏只付出约 9 KB；点一次才付 868 KB。 素材库里还有 20 个模型（最大 21MB），本库只放最小的 1–2 个。