### 🎯 博山炉3D互动页

你是一位资深的 Web 3D 交互开发工程师兼博物馆数字策展设计师，精通 Three.js（含 OBJLoader、MTLLoader、Raycaster、CSS2DRenderer）、单页 HTML 架构、性能优化与东方美学视觉设计，熟悉《千年调·中华器度》那类深色沉浸式文物叙事的版面语言：暗底、金色描边、克制的留白、缓慢的镜头运镜、点击即浮现的图文卡片。

你的任务是：为我输出一个**可直接运行的完整单页 HTML 文件**，把「西汉错金银铜博山炉」的 OBJ 模型做成可旋转、可缩放、可点击热点的 3D 交互网页。

**关于我的素材**
- 我已准备好多贴图材质文件夹，结构默认为：
  - `models/boShanLu.obj`
  - `models/boShanLu.mtl`
  - `models/textures/`（同名贴图，由 MTL 引用）
- 若浏览器本地直接打开 `.obj` 会被 CORS 拦截，请在页面内预留提示与说明（如何用本地服务器打开），并在代码顶部用一个常量集中管理模型路径，方便我替换。

**3D 场景要求**
- 用 Three.js + OrbitControls，暗色环境，限制极角避免穿到器物底部，缩放范围设上下限，禁用手感漂移过大的惯性。
- 三点式布光 + 环境光，主光偏暖金，辅光冷调，加极轻微的轮廓光，让金银错纹在金属质感下产生细闪；`renderer.toneMapping = ACESFilmicToneMapping`，`outputColorSpace = SRGBColorSpace`。
- 材质优先从 MTL 读取，若贴图缺失自动回退为金属质感材质（`metalness≈0.9, roughness≈0.35`），保证不出现黑模。
- 页面加载时播放一次缓慢自动运镜（由远推近 + 微旋转）后交还用户控制；提供「重置视角」按钮。
- 加载中显示带进度的加载界面（中式竖排文字或细金线进度条），加载失败给出可读的错误提示。

**热点与卡片交互**
- 用独立数据结构定义热点（数组即可，含：`id`、3D 坐标 `position`、标签文字 `label`、卡片标题、卡片正文、可选图片），与模型解耦，方便我日后增删。
- 热点在 3D 空间中以柔和呼吸光晕 + 金色小圆点呈现，附带始终朝向摄像机、不被模型遮挡（或不透视遮挡，按视觉更佳者选）的 CSS2D 标签。
- 鼠标点击热点（Raycaster 命中）或标签，弹出对应卡片；同一时刻只允许一张卡片打开。
- 卡片内容需包含以下板块，文案请按真实文博知识撰写（不要占位符）：
  1. 文物简介：西汉、错金银铜博山炉、器型与用途（熏香、仙山意象、海上仙山「博山」）
  2. 造型解读：炉盖山峦起伏、云气纹、鸟兽出没、炉柄与承盘的组合关系
  3. 工艺介绍——**错金银**：先在山体或器表錾刻／铸出凹槽，再将金丝、银丝或金银片嵌入、捶打压实、错磨平整，最后用错石与木炭打磨抛光，形成金、银、铜三色交错的华美纹饰
  4. 相关工艺延伸：鎏金、錾刻、失蜡法铸造（与错金银做对比说明）
  5. 历史背景：汉代神仙思想、熏香礼仪与贵族生活
- 卡片样式：深色半透明毛玻璃底 + 1px 淡金色描边 + 衬线中文字体，出现动画为淡入 + 轻微上移，关闭可用「×」按钮、点击遮罩、Esc 键三种方式。
- 热点至少 5 个，且分布在不同部位（炉盖山顶、山腰云气、炉身纹饰、炉柄、承盘），各自关联不同板块内容。

**视觉风格（对齐《千年调·中华器度》）**
- 主色：墨黑／深褐背景，金 `#C8A45C` 作强调，朱砂 `#A8322A` 作点缀，正文用低饱和的米白。
- 中文标题用竖排或大字距衬线体（如 `Noto Serif SC`/`Source Han Serif`），正文行距宽松，营造「器物+留白」的静气。
- 页面顶部有极简的标题区：「西汉·错金银铜博山炉」+ 一行副标题；底部有操作提示「拖拽旋转 · 滚轮缩放 · 点击光点查看」。可加一层极淡的颗粒／雾感噪点叠加以增质感。
- 所有过渡都走缓动（0.6s–1.2s），不要出现生硬突变。

**技术约束**
- 输出**单个 HTML 文件**，Three.js 及加载器全部通过 CDN 引入（ES Module 或 UMD 均可），不引入构建工具。
- 代码结构清晰，分区注释：常量配置 / 场景初始化 / 模型加载 / 热点系统 / 卡片系统 / 交互与动画 / 响应式与性能。
- 响应式适配移动端：卡片窄屏占满宽度，触控可旋转缩放，热点触控区域不小于 44px。
- 性能：`devicePixelRatio` 上限 2，窗口 resize 节流，动画用 `requestAnimationFrame` 统一驱动，避免逐帧创建对象。
- 兼容主流现代浏览器，控制台无报错。

**质量标准**
- 代码可直接复制保存为 `.html` 并在本地服务器环境下正常显示模型与热点。
- 文案有真实文博依据，术语（错金银、錾刻、鎏金、失蜡法）使用准确，不臆造史实。
- 交互流畅无卡顿，热点命中准确，卡片开合不冲突。
- 视觉上具备博物馆数字展览的沉浸感与东方审美，而非通用后台风格。
- 我只需替换模型路径与热点数据，就能复用到其他文物上。