Я работаю над демоверсией 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.
Issue
К сожалению, ключевые входные данные не работают в input формы.Элемент, то есть input и button, фокусируется на щелчке, но input не регистрирует нажатие клавиши.
Когда я проверяю список прослушивателей событий, к окну прикрепляется клавиша.
Когда я удаляю это конкретное событие keydown в отладчике консоли, форма начинает работать иничего не ломается, как показано ниже.
сделано до сих пор
Я прошел большинствоиз сообщений SO по этому вопросу, а также по этой проблеме, которая решалась здесь: https://github.com/mrdoob/three.js/issues/4327 Однако, либо я что-то упустил, либо здесь есть реальная проблема.Я считаю, что могу удалить событие по умолчанию keydown, которое прикрепляется к window, но я не думаю, что это скорее обходной путь.
Если кто-то захочет пролить свет на это, это будет очень полезно.Дайте мне знать, если вам нужно что-нибудь еще из кода.