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 之前，可以解决此问题。