一、实验概述
G 键拨动效果优化(拨动角度调小、修复泥塑穿入展台的问题)
H 键手势瞄准制改造(手势拨动从“猜目标”改为“准星指哪打哪”)
二、G键拨动实验:角度调小与穿台修复
2.1 问题定义
G 键:按下即拨动准星处的泥塑
①拨动角度过大:满强度拨动峰值倾角达 12.7°,晃动幅度夸张,不够含蓄;
②穿入展台:物理世界只有弹簧约束、没有台面碰撞,泥塑倾斜时底角直接穿进展台台面以下 54mm,出现“泥塑与展台平面重合”的错误观感。
2.2 实验方法:离线物理仿真先行
实验采用Node 脚本复刻页面同款物理参数(cannon-es 同版本、同样的 Box 刚体与四角零长弹簧)离线跑 60fps 仿真,先在仿真里锁定参数,再写入页面验证。
仿真输出的两项关键指标:峰值倾角(观感)与底角相对台面的最小 Y(穿模深度)。
工况 | 峰值倾角 | 底角穿入台面 | 观感结论 |
无接触平面 | 12.7° | 54 mm | 角度过大 + 明显穿模 |
2.3 方案设计与参数扫描
穿模原因是物理世界缺少台面碰撞体。
方案:在 cannon-es 世界中增加一张台面接触平面(y = 0.9 m,即所有展台台面高度,碰撞过滤组 1/2 隔离、不与彼此互撞),泥塑倾倒时底角会"磕"在台面上沿;同时把台面摩擦设为 0.3,自旋会被摩擦自然衰减,晃动感更真实。
强度 mag | 峰值倾角 | 穿入台面 | 3秒残余角 | 观感 |
0.5 | 2.5° | 0.2 mm | 0.02° | 太温柔 |
0.8 | 4.0° | 0.4 mm | 0.02° | 偏轻 |
1.0 ~ 1.3 | 5.0 ~ 6.6° | 0.6 ~ 0.8 mm | 0.03° | ✔ 选中区间 |
1.6 | 8.1° | 1.0 mm | 0.05° | 可接受 |
2.0 | 10.4° | 1.9 mm | 0.05° | 偏大 |
2.4 浏览器实测与截图
回正状态· 拨动 3 秒后泥塑回到正立姿态,与台面自然贴(倾角残余 0.03°)
三、H键与准星瞄准制实验
3.1 问题定义
原手势拨动的目标选取逻辑是“手出现在屏幕哪个位置,就拨那个位置附近的泥塑”——挥手时游客并不知道会拨动哪一件,缺少明确的触发点。
需求改为:鼠标十字准星对准哪件泥塑,挥手时就命令哪件。同时新增 H 键作为手势模式的快捷开关(此前只能点右上角按钮)。
3.2 准星瞄准制设计
删除原“屏幕占比邻近匹配”逻辑,新增vhFindCrosshairTarget():从屏幕中心发射线,命中哪件展品的网格就锁定哪件,手势挥手与 G 键共用这一选取结果。
三个改进:
①手势模式开启后准星常显,瞄准的泥塑名显示在准星下方(🎯),锁定目标一目了然;
实验截图:
②挥手但准星没对准泥塑时,提示“先用准星瞄准,再挥手”而非无声失败;
修复:手势开启但未锁定时,准星下方常显红色提示“🖱️ 点击画面锁定鼠标 · 移动视角用准星瞄准泥塑”;开启时的提示也改成三步引导。另加了瞄准容错:射线没正中模型时自动退回“准星邻近”兜底,瞄偏一点也能命中(实测视线偏 11°、射线零命中,依然正确拨中麒麟送子)。
实验截图:
③H 键开关手势模式,与右上角按钮等效,方便无鼠标操作。
// 准星射线代码修改
function vhFindCrosshairTarget() {
vhRaycaster.setFromCamera(vhCenter, vhCamera); // 屏幕中心射线
const hits = vhRaycaster.intersectObjects(vhInteractables, true);
if (hits.length > 0 && hits[0].distance < 12) {
let obj = hits[0].object;
while (obj && !obj.userData.isExhibit) obj = obj.parent;
if (obj) return vhPhysicsList.find(p => p.mesh === obj) || null;
}
return null;
}
//增加 H 键:手势模式快捷开
case 'KeyH': if (!e.repeat) {
if (vhGesture.on) vhStopGesture(); else vhStartGesture();
} break;
H键手势识别实测状态:
| 指标 | 数值 | 状态 |
|---|---|---|
| 渲染帧率(手势全开时) | 60~133 fps | ✔ 流畅 |
| 手势检测频率 | 3 次/秒 | ✔ 够用(挥手轨迹窗内能落多个点) |
| 单次推理耗时 | 135ms | ✔ 正常(核显 GPU 推理) |
| 拨动响应 | 0.9 秒到晃动峰值、3.4 秒回正 | ✔ 实时 |
四、减负情况
改进实测:(流畅模式)
指标 | 优化前 | 优化后(实测值) |
常亮射灯 | 19 盏(全部常开) | 6 盏池化跟随 |
渲染剔除 | 无 | 34m 外剔除(16 个物体) |
画布像素比 | ≤ 2.0 | ≤ 1.5,低帧自动降至 1 |
进入之后,若电脑硬件较差,会提示进入流畅模式。