keydown 在threejs畫布中不起作用，OrbitControls上

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。