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
4
votes
1 answer
dat.gui load settings from external JSON?
I have a webapp with a dat.gui interface, and I'd like people to be able to share their settings with each other. I know you can save presets to a localStorage file, or save them directly in the source as a JSON object.…
meetar
- 7,443
- 8
- 42
- 73
4
votes
1 answer
How to hide&show a folder in dat.gui's controls?
I'd like to hide a folder from the dat.gui's controls. By hide I mean hide, not close.
I don't want to let the user see the folder name nor let him open it when hidden.
I'll control the visibility of the folder programmatically based on values of…
Bakuriu
- 98,325
- 22
- 197
- 231
4
votes
5 answers
set the color the one object in three js with dat.GUI choose color
How to set a color with dat.gui in one object the Three js
I wanna choose the color with the dialog some like Box 3 in this example
How to make this?
Cristian
- 1,480
- 5
- 32
- 65
3
votes
0 answers
React-three-fiber encapsulated component not updating when props change
I am trying to use dat.gui in my project with react-three-fiber. I have a custom component named Cube that encapsulates a mesh like this:
import React from "react";
class Cube extends React.Component {
constructor(props) {
…
3
votes
1 answer
how to set up autoRotate toggle using dat gui for three.js
im making a program with 3 planets beside each other, i can use a slider to move them on each axis on its own, and i set up an autoRotate but i cant get it on the controls as a toggle that works.
heres my gui controls so far:
const autoRotate = {
…
hkokay
- 57
- 8
3
votes
1 answer
Customize min and max values in dat.gui with Three JS
I am using dat.gui on MorphTargets . By Default GUI takes 0 as min and 1 as max, I want them to be displays as my respective values for e.g.: 0 as 10 and 1 as 20.
How can I do that ?
Coder T
- 33
- 4
3
votes
1 answer
I cannot type in dat.gui in JSFiddle
I have written code that works perfectly when i run it locally on my system.
This is the link:
https://jsfiddle.net/rand0mus3r/L3j7kz5a/
When you click the mesh, a dat.gui instance appears. However, when i use backspace or try to input something in…
user1584421
- 3,499
- 11
- 46
- 86
3
votes
1 answer
How do i divide code into separate files?
I'm building on my Three.js project and have been struggling for some time on how i could divide two functions into separate files
I have my Main.js(React Class Component) file that contains 200> rows of code and two of these functions that i would…
Arasto
- 471
- 6
- 25
3
votes
1 answer
Webpack / NPM: Use build version of installed module instead of re-building from source
I would like to use the dat.GUI library for a project that's build with Webpack 2. If I install the module via npm -install --save-dev dat.gui and then try to import it using import * as DAT from 'dat.gui'; I get the following error when Webpack is…
lsgng
- 465
- 8
- 22
3
votes
1 answer
DAT.GUI : modify width of text field in order to put a long text
I would like to increase the width of a text field with DAT.GUI library JavaScript.
From this link, if I do (with 0 index corresponding to the index gui.add field like done below):
gui.add(params, 'StartingVector').name('Starting Vector :…
user1773603
3
votes
1 answer
Refreshing dat.gui variable
This is a dropdown list within a dat.gui interface. Once you click any number, the jumpSwitcher will be whatever number you chose. I’m trying to replace each list that pertains to their specific number based on that what the user chose for…
TheNuttyStudent
- 199
- 1
- 1
- 8
3
votes
2 answers
dat.GUI doesn't update when I change the object
Description of the problem:
There are 2 variable:
controller1 = {i: 100};
controller2 = {i: 300};
and a control variable
control = controller1;
I attached dat.GUI to control.i.
gui = new dat.GUI();
controller = gui.add(control,…
user6820627
3
votes
1 answer
Calendar input for dat.gui
Is there any way to have a Calendar input for dat.GUI? I'd like to be able to use the UI to input dates if possible. My work around is currently to enter the dates as Text, but I would prefer to have some type of calendar. Thanks!
DSquad
- 101
- 5
3
votes
1 answer
Cannot read property 'material' of undefined Three.js
I can not understand why it shows me the following error:
Can not read property ' material ' of undefined " at line "
scene.getObjectByName ( " cube " ) . material.opacity = control.opacity ; "
My code:
var scene = new THREE.Scene();
var…
valentina di noi
- 43
- 1
- 4
3
votes
2 answers
Three.js & Dat.gui - TrackballControls renderer.domElement disables rotate and pan
I am trying to use dat.gui with a very simple three.js (r73) scene but am running into an issue with rotate and pan not working after adding "renderer.domElement" to the trackballControls initialization. Zoom works as expected.
Without…
rjd
- 1,786
- 2
- 16
- 19