keydown 在threejs画布中不起作用，OrbitControls on

Question

我正在做一个threejs 演示，里面有几个对象。我想要的是画布顶部位置的form 元素，用户可以在其中输入文本。

---

背景

我正在使用下面的函数动态创建一个表单，这似乎工作得很好。

function createInput() {
    var form = document.createElement( 'form' );
    form.className = 'form-inline';
    form.style.zIndex = 100;
    form.style.position = 'absolute';
    form.style.top = '0px';
    form.style.left = '0px';
    var div = document.createElement( 'div' );
    div.className = 'form-group';
    form.appendChild( div );
    var input = document.createElement( 'input' );
    input.id = "newId";
    input.type = 'email';
    input.className = 'form-control form-control-sm';
    input.placeholder = 'Email..'
    input.name = 'email';
    var button = document.createElement( 'button' );
    button.id = "submitLabel";
    button.type = 'button';
    button.className = 'btn btn-primary btn-sm';
    button.innerHTML = "Put";
    var trashButton = document.createElement( 'button' );
    trashButton.id = "trashLabel";
    trashButton.type = 'button';
    trashButton.className = 'btn btn-danger btn-sm';
    trashButton.innerHTML = "Del";
    div.appendChild( input );
    form.appendChild( button );
    form.appendChild( trashButton );
}

请注意我在画布中使用OrbitControls。 下面是我的html的结构。它有两个部分 - 一个是完全独立的搜索面板，另一个是通过 iframe 元素加载的 canvas 元素。

我的轨道控件被实例化为controls = new THREE.OrbitControls( camera, container );，其中容器称为renderer.domElement - 即canvas 元素。

---

问题

很遗憾，表单的input 中的键输入不起作用。元素，即input 和button 专注于点击，但input 没有注册任何击键。

当我签入事件侦听器列表时，keydown 会附加到窗口。

当我在控制台调试器中删除这个特定的 keydown 事件时，表单开始工作并且没有任何中断，如下所示。

---

到现在为止

我已经浏览了大部分关于此的 SO 帖子，以及在此处管理的此问题：https://github.com/mrdoob/three.js/issues/4327 但是，要么我遗漏了一些东西，要么这里有一个真正的问题。我相信我可以删除附加到window 的默认keydown 事件，但我认为这不是一种解决方法。

如果有人愿意对此有所了解，那将非常有帮助。如果您需要代码中的其他内容，请告诉我。

Answer 1

您可以尝试设置 OrbitControls.enableKeys = false 吗？

如果这允许您的事件传播..也许您可以对您的输入进行 onblur / onfocus 并切换 OrbitControls.enableKeys。