Question

我正在使用dat.gui，我想将它放在与右上角不同的位置，最好是在顶部重叠一个three.js画布，这是通过命令完成的，还是有一些css可以执行欺骗？

Answer 1

接受的答案回答了我的问题，但并不是我要解决问题的方法，当我在页面上下移动时，请跟我滚动。我没有为gui domElement设置ID，而是将元素添加到我可以更好地控制的现有元素中。

的CSS：

.moveGUI{ 
    position: absolute;
    top: 13.1em;
    right: -1em;
}

JS：

// Create GUI   
    gui = new dat.GUI( { autoPlace: false } );
    {
        // create fill and open folders
    }
    var customContainer = $('.moveGUI').append($(gui.domElement));

HTML：

<div  class = 'moveGUI'>
</div>

Answer 2

你需要一些JavaScript和CSS才能做到这一点。

GUI构造函数可以传递参数对象。您可以告诉控件不要自动播放。您还可以附加元素ID以使样式更容易

var gui = new dat.GUI( { autoPlace: false } );
gui.domElement.id = 'gui';

然后放置它的CSS可以是这样的：

#gui { position: absolute; top: 2px; left: 2px }

Answer 3

覆盖CSS：

Data Controlls

Answer 4

我个人喜欢使用：

    function datgui(){
    let gui = new dat.GUI({
        width : 300
    });

如何更改dat.gui下拉列表的位置？

4 个答案: