ARTICLE · INTELLIGENCE

战地情报 · 详情页

来自尧图项目组的一线实战观察与深度解析

关于凤翔泥塑云展平台(交互一)实验调整报告

关于凤翔泥塑云展平台(交互一)实验调整报告

一、实验概述

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

进入之后,若电脑硬件较差,会提示进入流畅模式。

RELATED READING

延伸阅读

更多一线实战笔记与深度复盘,助您持续精进