I’ve been experimenting with integrating Dat GUI into my Three.js project for adding some controls. The interface of Dat GUI really appeals to me, but I’m facing challenges in terms of positioning the menu on the page. Specifically, I’m looking to center the menu both horizontally and vertically while also defining a custom width and height. Is it feasible to achieve this?
My current approach involves attempting to center the menu horizontally, which seems to be partially successful. However, the vertical alignment is off (stuck at the top) and the size remains unchanged despite specifying width and height parameters.
If anyone could offer guidance on this matter, I’d greatly appreciate it.
Javascript:
var gui;
var MenuClass = function()
{
this.speed = 0.5;
};
var theMenu = new MenuClass();
gui = new dat.GUI();
gui.domElement.id = 'gui_css';
gui.add(theMenu, 'speed', -5, 5);
CSS:
#gui_css
{
position: absolute;
left: 50%;
top: 50%;
width: 400px;
height: 200px;
}