Dat.gui is a small JavaScript library to render some GUI elements like sliders, color pickers, etc.
Repository: https://github.com/dataarts/dat.gui
Documentation: http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage
Questions tagged [dat.gui]
182 questions
3
votes
2 answers
Uncheck a checkbox in dat.gui
When I change the option of a dropdown menu, I want all the checkboxes to be unchecked. Here's the code that I put inside a function that's called when the dropdown menu changes:
var inputs = document.getElementsByTagName("input");
for(var i = 0; i…
user3448821
- 249
- 1
- 3
- 13
3
votes
0 answers
How to resize dat.gui height?
I am trying to append the gui DOM element to a (small) div container rather than to the default HTML document. Since I need to resize it for the smaller container, and I am trying :
var gui = new dat.GUI({"autoPlace": false, "width": 30, "height": 5…
Janthelme
- 989
- 10
- 23
3
votes
5 answers
dat.GUI user input not working
I am building a simple web application. As part of it I want to use dat.GUI since it seems to be the easiest way.
What I want to do:
I am using three.js to display an object. Over this object I want some sort of GUI (currently using dat.GUI) which…
H_end-rik
- 551
- 1
- 6
- 19
3
votes
1 answer
Color picker with alpha using dat.gui (HTML5)
Is there any way to get a color picker which modified the alpha channel of a RGBA color using dat.gui ( http://code.google.com/p/dat-gui/ )?
Currently I'm only able to change the RGB value using the color picker - even though the color picker…
Mortennobel
- 3,383
- 4
- 29
- 46
2
votes
1 answer
dat.gui in three.js not applying changes
I am learning three.js. But when I try to use the dat.gui library, no change is applied to the light. I have given the codes in the link.
gui.add(spotLight, 'penumbra', 0, 1).step(0.01);
gui.add(spotLight, 'intensity', 0, 10).step(1);
…
Coderowsky
- 21
- 1
2
votes
1 answer
How to control size and color of textGeometry with dat.gui?
I found out that I could use dat.gui to control size and color of textGeometry besides changing color and size for every other scene through editing .js file. But probably bad architecture of my code, I am not able to control or even add gui folder…
rju7n
- 23
- 6
2
votes
1 answer
How to change the size of a 2D circle using lil gui with THREE.js?
I want to change the size of a circle as I drag a lil gui slider.
I have this code, which draws a circle with a blue line in a black screen, with an ortographic camera:
initGUI();
let radius = 0.6;
let vertices = [];
for(let i = 0; i…
Jonas
- 83
- 5
2
votes
1 answer
Sequentially rotate threejs object around world axes (extrinsic Euler angles)
I am creating a visualization of extrinsic Euler angle rotations, and I want an animation where a cube rotates around the world axes depending on user input. I have a dat.GUI control with x, y, and z rotation angle controls.
See this screenshot.
So…
the_sky_is_pink
- 109
- 2
- 11
2
votes
1 answer
Toggle button for three.js GUI
Simple question is there a simple on/off button for three.js gui?
var params =
{
switch: 0
};
// on/off button
gui.add(params, "light switch").min(0).max(1).step(1)
gui.open();
This is what I have so far, but you have to slide the value left…
Ghoul Fool
- 6,249
- 10
- 67
- 125
2
votes
1 answer
How to import the dat.gui library into a Sapper/Svelte project?
I have a standard Sapper project like that:
routes
├── application
├──- index.svelte
├──- _brush.js
├──- (...etc)
I wish to install the library 'dat.gui' to my project and I have installed:$ npm install --save dat.gui with…
Bernat Ferragut
- 21
- 2
2
votes
1 answer
Changing # of vector points on a plotted circle in p5.js with dat.GUI
I am trying to create some custom shapes in p5js by plotting a certain number of vertices (determined by stepCount) in a circular shape and then connecting the points.
Depending on the stepCount, the shape can be a line, rectangle, pentagon,…
Anokhee Jandhyala
- 183
- 1
- 7
2
votes
1 answer
Three.js prevent Raycast through Gui
I want to select objects with raycasting, but everytime i want to select something on the three.js gui, the Mousdownevent get triggered.
How can i say something like "if the Gui is in front of the object, dont trigger"
document.addEventListener(…
derseitzer
- 149
- 1
- 9
2
votes
1 answer
Update texture of mesh using ThreeJS & Dat.Gui
I would like the texture of my Mesh to update when clicked on function.
When you click on the 'UpdateMateria' function i'd like the mesh to dispose its current texture and add a new one.
Animation Loop
startAnimationLoop = () => {
const…
Arasto
- 471
- 6
- 25
2
votes
1 answer
How do I call a function using DAT.Gui like a button?
I barely know JavaScript, but I know enough to know how to make function connections, timers, CSS editing/HTML editing, and more, but I don't understand how to use this "dat.GUI", as my current project design... well.. It sucks.
All my buttons are…
Mister SirCode
- 1,575
- 14
- 31
2
votes
2 answers
Is there a way to build range slider with dat.gui.js in ThreeJs?
I want to have a range slider in my design, although I have a number slider but would like to have where I can select a range of number to be passed like in below picture.
Is there any option rather than making changes in the dat.gui.js file and…
newcomer
- 422
- 2
- 18