如何阻止dat.GUI的keydown事件冒泡到Three.js场景触发变更

代码修改方案 #

只需调整changeColor函数，增加事件源判断逻辑即可：

function changeColor(event) {
    // 过滤dat.GUI内触发的事件
    if (event.target.closest('.dg')) return;
    
    cube.material.color.set(Math.random() * 0xffffff);
    cube.material.needsUpdate = true;
    render();
}

原理解释 #

1. dat.GUI的所有控件外层都带有固定类名.dg，调用DOM元素的closest方法可以判断当前触发事件的元素是否属于GUI组件内部，如果是则直接跳过后续颜色变更逻辑。
2. 你之前尝试把keydown绑定到renderer.domElement不生效的原因是元素默认不可聚焦，只有给它设置tabindex属性且主动聚焦后才能响应键盘事件，相比之下给全局keydown事件增加过滤逻辑的适配成本更低，也不会影响原有操作逻辑。

内容的提问来源于stack exchange，提问作者Peque