TypeError：在three.js中使用DAT.gui（）時未定義DAT

Question

我正在嘗試在代碼中使用DAT.gui來控制three.js攝像頭

我在index.html文件中包含以下內容。

<script type='text/javascript' src='../_libs/DAT.GUI.min.js'></script>

我確保從build文件夾中獲取文件

當我在my.js文件中使用以下代碼時

var gui = new DAT.GUI();
    gui.add(camera.position, 'x', -500,500).step(5);
    gui.add(camera.position, 'y', -500,500).step(5);
    gui.add(camera.position, 'z', 1000,5000).step(5);

我得到以下錯誤TypeError: DAT is undefined 。 我也嘗試用dat.GUI字母使用dat.GUI ，但仍然是同樣的問題。 似乎my.js無法到達DAT.GUI.min.js但是為什么可以到達其他文件。

Answer 1

它應該是這樣的小寫。

var gui = new dat.GUI();
    gui.add(camera.position, 'x', -500,500).step(5);
    gui.add(camera.position, 'y', -500,500).step(5);
    gui.add(camera.position, 'z', 1000,5000).step(5);

現在是大寫字母就像你做的那樣：

var gui = new DAT.GUI();
    gui.add(camera.position, 'x', -500,500).step(5);
    gui.add(camera.position, 'y', -500,500).step(5);
    gui.add(camera.position, 'z', 1000,5000).step(5);

這就是為什么它說DAT未定義。 希望這有幫助！

編輯

嗯，我剛剛看到您嘗試使用小寫的dat。.那么問題出在最小的javascript版本上。.我真的不推薦min.js ...您可以嘗試.js嗎？

EDIT2

嗯，這一次，您可以這樣格式化所有代碼嗎？

var params = {
    z: 100
}

gui.add(params, 'z', -500, 500).step(5).onChange(function(value) {
    camera.position.z = value;
});

如果那個劑量工作不適，需要有一個掠奪者。

Answer 2

我只是遇到了同樣的問題，並意識到在我的index.html文件中，我在主javascript文件之后獲取了dat.gui庫。 將dat.gui腳本src移到我的main.js腳本src 之前，可以解決此問題。