I am currently developing a threejs demo that contains several objects. One of my objectives is to create a form element positioned above the canvas, allowing users to input text.
Background
My approach involves dynamically generating a form using the function below, which appears to be functioning correctly:
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);
}
Please note that I am utilizing OrbitControls in my canvas. The HTML structure consists of two separate sections: a search panel and a canvas element loaded within an iframe.
My orbit controls are instantiated as
controls = new THREE.OrbitControls(camera, container);renderer.domElement - the canvas element.
Issue
Unfortunately, the input field in the form does not register key inputs. Although the elements, input and button, respond to clicks, the input does not recognize any keystrokes.
Upon inspecting the Event Listeners, I found that keydown is attached to the window.
After removing the specific keydown event in the console debugger, the form started functioning properly without any issues.
Progress So Far
I have extensively researched similar issues on Stack Overflow and GitHub, including a related discussion at https://github.com/mrdoob/three.js/issues/4327. However, I still believe there may be a fundamental issue at play here. While I can remove the default keydown event attached to the window, I consider this more of a temporary fix.
If anyone has insights to share on this matter, I would greatly appreciate it. Feel free to request any additional code if needed.