dat.GUI пользовательский ввод не работает

Question

Я создаю простое веб-приложение. В рамках этого я хочу использовать dat.GUI, поскольку это, кажется, самый простой способ.

Что я хочу делать: Я использую three.js для отображения объекта. По этому объекту я хочу какой-то GUI (в настоящее время использующий dat.GUI), который позволяет пользователю вводить поисковый запрос и нажимать кнопку, чтобы затем вызвать функцию, которая использует термин поиска.

До сих пор я создал переменную, называемую поисковым термином, и добавила ее в графический интерфейс. Это отлично работает, и отображается значение переменной. Графический интерфейс также способен прослушивать переменную и обновлять ее после ее изменения. Но я не могу изменить значение. Я также добавил поле, чтобы отрегулировать интенсивность света, который я добавил в szene, в три раза. Для этой части графического интерфейса, регулирующего значение, перетаскивая панель, но попытка ввода значения не выполняется.

код выглядит примерно так:

var searchterm = ''; 
... 

function init(){ 
.... 
var gui = new dat.GUI(); 
gui.add(light, 'intensity').min(1).max(10).listen(); 
gui.add(this, 'searchterm').listen(); 

} 

Любая помощь, почему я не могу изменить значения или предложения для других легко использовать ГПИ будет оценен.

Answer 1

Возможно, заказ z может стать неправильным? Я не могу найти ничего более легкого в использовании, чем dat gui.

.main { 
    z-index: 5; 
} 

Убедитесь, что этот элемент спереди. Помимо этого, я уверен, в чем проблема.

Answer 2

Не уверен, что это поможет, но это была проблема, с которой я столкнулся. Если у вас есть какие-либо элементы управления камерой, связанные с вашим холстом three.js, это может помешать графическому интерфейсу. Например, вы могли бы регулировать ползунки, но не редактировать текст. При подключении управления к three.js камеру с, например, new THREE.OrbitControls(camera);, убедитесь, чтобы указать элемент Three.js Dóm в качестве второго параметра, как это:

new THREE.OrbitControls(camera, document.getElementById('threeCanvas'));

Answer 3

У меня есть некоторые проблемы.

Он исходит из функции «.listen()». Это багги.

удалить .listen(), и он будет работать.

Answer 4

У меня была та же проблема. В моем случае это было вызвано следующим CSS:

span { 
    margin: 0 10px; 
} 

Применения стиля к вновь созданному классу вместо span решил.