CODEWITHSUNDEEP
javascriptformsthree.js
Manganese
Manganese

Reputation: 690

keydown doesn't work in threejs canvas, OrbitControls on

I am working on a threejs demo, it has couple of objects within. What I want is a form element at the position atop the canvas, where a user can input a text.

Background

I am creating a form dynamically, using the below function, which seem to work perfectly fine. 

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 );
}

Note that I am using OrbitControls in my canvas. Below is the structure of my html. It has two sections - one of search panel which is completely separate and another is canvas element which is being loaded through iframe element.

enter image description here

My orbit controls are instantiated as controls = new THREE.OrbitControls( camera, container ); where the container referred to as renderer.domElement - i.e, canvas element.

Issue

Unfortunately, the key inputs don't work in the input of the form. The element , i.e., input and button is focussed on clicking but input doesn't register any key stroke.

When I checking in the list of Event Listeners, keydown is attached to the window.

enter image description here enter image description here

When I remove this particular keydown event in the console debugger, the form starts to work and nothing breaks, as below.

enter image description here

Done till now

I have gone through most of the SO posts on this, as well as this issue which was managed here: https://github.com/mrdoob/three.js/issues/4327 However, either I am missing something, or there is a real issue here. I believe I can remove the default keydown event which is being attached to the window, but I don't think this is more of a workaround.

If anyone would be kind to shed some light on this, it will be real helpful. Let me know if you need anything else from the code.

Upvotes: 1

Views: 1459

Answers (1)

manthrax
manthrax

Reputation: 5036

Can you try setting OrbitControls.enableKeys = false?

If that allows your events to propagate.. perhaps you can do a onblur / onfocus on your input and toggle OrbitControls.enableKeys.

Upvotes: 1

Related Questions