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

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 }