界面说明

整体布局

┌─────────────────────────────────┐
│  AppBar（模型名 + 控制按钮）      │
├──────────────────┬──────────────┤
│                  │  HUD 信息卡   │
│   3D 画布区域     │  （模型参数）  │
│   （全屏模型）    ├──────────────┤
│                  │  PHYS 物理卡  │
│                  │  （物理调校）  │
├──────────────────┴──────────────┤
│  日志卡 / 播放控制条              │
└─────────────────────────────────┘

面板说明

AppBar（顶栏）

按钮	功能
模型名	显示当前模型名称
🔄 复位	重置相机视角到默认位置
⛶ 沉浸	隐藏所有 UI，进入全屏沉浸模式

HUD 信息卡

显示当前模型的基本信息：

字段	说明
模型名	当前加载的模型
顶点数 / 面数	模型网格复杂度
FPS	实时帧率
物理耗时	每帧物理计算耗时（EMA 平滑）

可折叠（默认收起），点击头部展开。

PHYS 物理卡

物理系统的核心控制面板：

区域	内容
MODELS	模型列表 / 导入按钮 / 动作选择
基本参数	物理开关、重力、摇摆、帧率上限
风力	风力开关、强度、方向（自动/手动罗盘）
调试	线框叠加、包围盒可视化
恢复默认	一键重置所有参数

日志卡

左下角浮动卡片，显示最近 4 条操作日志：

• 模型加载状态
• 动作播放信息
• 错误提示

点击可展开完整日志弹窗，支持复制。

播放控制条

动作播放时底部出现：

控件	功能
进度条	拖动 seek 到指定时间
⏯ 播放/暂停	控制动画
⏩ 倍速	0.5x / 1x / 1.5x / 2x
⏭ 快进	跳到下一个关键帧

交互细节

卡片层级

三张卡片（HUD / PHYS / 日志）支持动态层级：后点击/展开者自动置顶（z-index 30），另一张回落（z-index 20）。日志卡固定底层（z-index 15）。

点击空白收缩

只有点击 3D 画布区域才收缩展开的卡片——点击其他 UI（HUD/PHYS/日志）不会触发收缩。

沉浸模式

点击 AppBar 的沉浸按钮：

• 隐藏所有 UI 面板
• 浏览器全屏（需用户授权）
• 点击画布任意位置退出

触摸优化

• iOS 滑块不会触发页面放大（font-size: 16px 兜底）
• 手势操作：单指拖拽旋转、双指缩放、双指平移
• 触摸目标 ≥ 40px

主题

当前为 Material Design 2 浅色主题：

• 主色 Blue 500（#2196F3）
• 背景 #fafafa，卡片纯白
• 海拔阴影（1dp / 8dp / 24dp）
• Noto Sans SC 字体

NOTE

暗色模式曾多次尝试但回滚，当前仅支持浅色。