dat.GUI用戶輸入不工作

我正在構建一個簡單的Web應用程序。作爲它的一部分，我想使用dat.GUI，因爲它似乎是最簡單的方法。dat.GUI用戶輸入不工作

我想要做的事：我使用three.js來顯示一個對象。在這個對象上，我想要一些圖形用戶界面（目前使用dat.GUI），它允許用戶輸入一個搜索詞並點擊一個按鈕，然後調用一個使用搜索詞的函數。

到目前爲止，我創建了一個名爲搜索詞的變量，並將其添加到GUI中。這工作正常，並顯示變量的值。 GUI也可以監聽變量並在其更改後進行更新。但我無法修改這個值。我還添加了一個字段來調整我在three.js中添加到szene中的光的強度。對於GUI的這一部分，通過拖動工作欄來調整該值，但嘗試輸入一個值不會。

代碼看起來是這樣的：

var searchterm = ''; 
... 

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

}

爲什麼我不能代表其他易於使用的圖形用戶界面編輯值或建議的任何幫助，將不勝感激。

來源

2013-06-21 H_end-rik

有關使用dat.gui和three.js的示例，請查看http://stemkoski.github.io/Three.js/ –

這些示例具有相同的問題。 –

z順序可能會出錯？我找不到比dat gui更容易使用的東西。

.main { 
    z-index: 5; 
}

會確保這個元素在前面。除此之外，我確定問題可能是什麼。

來源

2013-11-22 11:37:14 Culzean

我正在使用裸露的骨骼網，這解決了我的問題，謝謝！ z-index需要爲0，因爲當ThreeJS窗口處於z-index 1時，dat.gui被覆蓋了。 – Orbitus007

不知道這是否會有所幫助，但這是我遇到的問題。如果您有任何與three.js畫布相關的相機控件，可能會干擾GUI。例如，您可以調整滑塊，但不能編輯文本。當您將控制在three.js所相機，例如，new THREE.OrbitControls(camera);，確保指定的three.js所DOM元素作爲這樣的第二個參數：

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

來源

2013-11-22 16:26:51 Ey3cue

這有助於解決軌道控件和dat.gui可能發生的大多數問題，但我認爲它不能解決有問題的問題。偉大的建議，但。 –

我有一些問題。

它來自「.listen（）」函數。這是越野車。

刪除.listen（），它會工作。

來源

2013-11-28 16:51:19 Sayris

Woah，不知道爲什麼修復它，但這是解決方案。萬分感謝。 –

我看到了同樣的問題。是否有解決此問題的DAT GUI版本？ –

這裏同樣的問題，但我沒有使用'.listen（）'。 :( – ygormutti

我遇到了同樣的問題。在我的情況下，它是引起下面的CSS：

span { 
    margin: 0 10px; 
}

應用樣式到新創建的類，而不是span解決它。

來源

2016-02-28 02:34:18 ygormutti

我正在使用裸骨的網站，這解決了我的問題，謝謝！ – Orbitus007

z-index需要爲0，因爲dat。當ThreeJS窗口在z-index 1時，gui被覆蓋了......所以這個答案幫助我弄清楚了這一點 – Orbitus007

dat.GUI用戶輸入不工作

回答

相關問題