我正在进行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的结构。它有两个部分-一个完全独立的搜索面板,另一个是通过
canvas
元素加载的iframe
元素。我的轨道控制实例化为
controls = new THREE.OrbitControls( camera, container );
,其中容器称为renderer.domElement
-即canvas
元素。问题
不幸的是,键输入在表单的
input
中不起作用。元素input
和button
集中在单击上,但input
不注册任何按键。当我检查“事件侦听器”列表时,keydown会附加到窗口。
当我在控制台调试器中删除此特定的
keydown
事件时,该窗体开始工作,并且没有中断,如下所示。完成到现在
我已经处理了大部分关于此的SO帖子,以及在此处管理的此问题:https://github.com/mrdoob/three.js/issues/4327
但是,或者我丢失了一些东西,或者这里有一个真正的问题。我相信我可以删除默认的
keydown
事件,该事件已附加到window
,但是我认为这不是解决方法。如果有人愿意对此有所了解,那将是真正的帮助。让我知道您是否还需要代码中的其他内容。
最佳答案
您可以尝试设置OrbitControls.enableKeys = false吗?
如果那允许您的事件传播..也许您可以对输入内容进行onblur / onfocus并切换OrbitControls.enableKeys。