Steps to create folders in dat.gui:

I'm attempting to incorporate folders for the lights in a three.js project that I borrowed from a three.js example. However, I am struggling to make it work. From what I gather, I should use f1=add.folder('light1') and then somehow add the parameters to f1 with f1.add('intensity') etc... but how can I achieve this when the code is structured in this manner? node = f1.add() doesn't work!

        function createGUI() {
            clearGui();         
 /****************************** Light1 **************************/ 
            var f1 = gui.addFolder('Light1');
            addGui( 'lightcolor', spotLight.color.getHex(), function( val ) {
                spotLight.color.setHex( val );
                render();
            }, true );

            addGui( 'intensity', spotLight.intensity, function( val ) {
                spotLight.intensity = val;
                render();
            }, false, 0, 2 );

 /************************** Light2 **************************/  
            var f2 = gui.addFolder('Light2');
            addGui( 'lightcolor 2', spotLight2.color.getHex(), function( val ) {
                spotLight2.color.setHex( val );
                render();
            }, true );

            addGui( 'intensity 2', spotLight2.intensity, function( val ) {
                spotLight2.intensity = val;
                render();
            }, false, 0, 2 );
        }

        function addGui( name, value, callback, isColor, min, max ) {
            var node;
            param[ name ] = value;

            if ( isColor ) {
                    node = gui.addColor( param, name ).onChange( function() {
                    callback( param[ name ] );
                } );
            } else if ( typeof value == 'object' ) {
                    node = gui.add( param, name, value ).onChange( function() {
                    callback( param[ name ] );
                } );
            } else {
                    node = gui.add( param, name, min, max ).onChange( function() {
                    callback( param[ name ] );
                } );
            }
            gui.remember(param);
            return node;
        }  

Answer №1

To ensure smooth functioning, include the target (referred to as gui or the folder) as a parameter in the addGui method.

Here's an example of how to do this:

function addGui(gui, name, value, callback, isColor, min, max ) {
  // ... remains unchanged
}

var f3 = gui.addFolder('Light3');
addGui(f3, 'lightcolor 3', /* ... */);

Answer №2

If you're looking for an easier way to achieve the same thing, I stumbled upon this JS Fiddle that might help:

https://jsfiddle.net/ikatyang/182ztwao/

var gui = new dat.GUI({ load: getPresetJSON(), preset: 'Preset1' });

var object1 = {
    type1_boolean: false,
  type2_string: 'string',
  type3_number: 0,
  type4_function: function () {
    alert('This is a function.');
  }
};

var object2 = {
    string1: 'string1',
  string2: 'string2'
};

var object3 = {
    color0: "#ffae23", // CSS string
  color1: [ 0, 128, 255 ], // RGB array
  color2: [ 0, 128, 255, 0.3 ], // RGB with alpha
  color3: { h: 350, s: 0.9, v: 0.3 } // Hue, saturation, value
};
// dat.GUI will modify colors in the format defined by their initial value.

// saveValues: gui.remember must be executed before gui.add
gui.remember(object1);
gui.remember(object2);

// setController: boolean, string, number, function
gui.add(object1, 'type1_boolean');
gui.add(object1, 'type2_string');

var folder1 = gui.addFolder('FolderNameA');
folder1.add(object1, 'type3_number', -5, 5);
folder1.add(object1, 'type4_function');

// collapse folder1
folder1.close();

var folder2 = gui.addFolder('FolderNameB');
folder2.add(object2, 'string1', {
    'key1': 'string_1',
  'key2': 'string_2',
  'key3': 'string_3'
});
folder2.add(object2, 'string2', [
    'string_1', 'string_2', 'string_3'
]);

var folder3 = gui.addFolder('FolderNameC');
folder3.addColor(object3, 'color0');
folder3.addColor(object3, 'color1');
folder3.addColor(object3, 'color2');
folder3.addColor(object3, 'color3');

// expand folder3
folder3.open();

// presetJSON: created from pressing the gear.
function getPresetJSON() {
    return {
    "preset": "Default",
    "closed": false,
    "remembered": {
      "Default": {
        "0": {
          "type1_boolean": false,
          "type2_string": "string",
          "type3_number": 0
        },
        "1": {
          "string1": "string1",
          "string2": "string2"
        }
      },
      "Preset1": {
        "0": {
          "type1_boolean": true,
          "type2_string": "string123",
          "type3_number": -2.2938689217758985
        },
        "1": {
          "string1": "string_2",
          "string2": "string_3"
        }
      }
    },
    "folders": {
      "FolderNameA": {
        "preset": "Default",
        "closed": false,
        "folders": {}
      },
      "FolderNameB": {
        "preset": "Default",
        "closed": false,
        "folders": {}
      },
      "FolderNameC": {
        "preset": "Default",
        "closed": false,
        "folders": {}
      }
    }
  };
}
.folder .dg ul {
  margin-top: 0 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>

While this solution isn't originally mine, I found it to be quite useful.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implement feature to enable selection using jQuery

I have a question about implementing an <option value="fiat">Fiat</option>"> element into a dropdown list using jQuery. I've tried the code below and encountered some issues. When I click the button, I want to add the <option value= ...

How can I retrieve values of selected checkboxes using the Express Data API?

I have a scenario where I need to retrieve data from input checkboxes only when the checkbox for my express post function is selected. There are 3 checkboxes with values of 1000, 2000, and 3000 as follows: <input type="checkbox" name=" ...

External API data is shown in the browser console but appears as undefined on the page

Can you please lend me a helping hand? I am facing a critical issue while attempting to retrieve data from an external API using axios in NextJS (Reactjs)/TypeScript through getServerSideProps. The data fetching is successful, and the JSON is returned on t ...

Using ng-value does not trigger any updates to the Ng-model

After setting the input value Array property sum, it displays the value in the input field. However, when submitting the form, the Quantity property is not being received in the Order object. I noticed that if I change the value manually, then the Quanti ...

Properly segmenting sections into components in Angular

My project has a specific folder structure as shown below: https://i.sstatic.net/7oihC.png In my list-page, I perform operations such as create, update, and delete using modal dialogs. I am considering creating 4 pages for each of these CRUD operations a ...

React is having trouble resolving the path required

Having an issue with the tracking-js library in my project. I'm using React and despite checking my package.json and confirming that the module is installed, I keep receiving errors indicating that the module cannot be found. This is how I am attempti ...

Why do some button clicks not trigger a page refresh in JavaScript?

Hey there, I have a situation where I have two buttons - one to add a dog to the dog list and another to clear the entire list. Both buttons are functioning properly, but I'm having an issue with only the OnSubmit button refreshing the page. The dog ...

Having trouble with window.setInterval in AngularJS?

My coding snippet involves the use of the setInterval method: function MyController($scope) { $scope.clock = new Date(); var updateClock = function() { $scope.clock = new Date(); }; setInterval(updateClock, 1000); }; The HTML asso ...

Implementing text truncation in JavaScript

I am seeking to transform the INPUT I have into a desired OUTPUT format. pieChart.js stackedColumnChart.js table.js and i want OUTPUT like that(wanna remove .js from ) pieChart stackedColumnChart table ...

HTML/JS Implementation: Back to Top Visual Element

- This website appears to be quite simple at first glance. However, I have encountered an issue where every time I scroll down and then click on the "About" menu option, it abruptly takes me back to the top of the page before displaying the section with a ...

actions with frontend routing for CRUD operations

Imagine you are creating a simple CRUD todo application. Whether you choose to use Angular, React, or Vue for routing, the setup will be similar: /todos => see all todos /todos/:id => view one todo by id /todos/:id/edit => edit one todo by id /t ...

Run a JavaScript function in the webpage that is being loaded using an XMLHttpRequest

What is the best way to trigger a JavaScript function within a specific page using XMLHttpRequest? For example, if I have the following code: xmlhttp.open("GET", "page1.php?q=" + mydata, true); How can I execute a JavaScript function that will, for insta ...

Scrolling through a list of objects in a React component to display a vertical lineup of items including the name and logo

Currently, I am working on developing a vertical scrolling ticker/item list that showcases both the name and logo of each item within an array. Initially, I had set up a scrolling ticker solely with names using webkit animations on styled components. Howev ...

Launch target _blank within a modal instead of a new tab

I'm currently exploring ways to use vanilla JavaScript in order to display all external links - particularly those that typically open in a new tab or window - within a modal box instead. My goal is to implement a listener on external links (those no ...

"Exploring the Possibilities of Dynamic Styling with VueJS

I am facing an issue with a data property called editMode set on a Vueity Card. When I click on a button, the editMode switches to true and an icon appears on the v-img. However, I want to adjust the opacity of the image to 0.3 when editMode is true, witho ...

What is the best strategy for managing pagination when dealing with a large number of pages?

Up until now, I have understood that pagination only links different pages together. This works fine when dealing with a limited number of pages or posts to display. However, what if I have 30 or more pages to paginate? Wouldn't it be impractical to c ...

Use CSS and JavaScript to create a visually appealing and interactive tree structure. Give the tree a dynamic design

I have been experimenting with CSS and JavaScript to create a dynamic graph based on a data table. You can view the graph that I need to replicate using CSS and JavaScript in this PDF. The example provided below showcases what I am attempting to achieve, a ...

Update all field values in Redux-form version 6.0 and above

I am attempting to update several values in redux-form. They are stored in a single object, and I want to replace the current redux-form state values with those from my object. One method I have tried involves using this.props.reset() followed by multipl ...

Explore the capabilities of redux independent of the react framework

I've been searching for hours trying to find a way to access the store (to dispatch and observe) without using React Components, but have had no luck. Here's my situation. I created the store in the root of the App: import { Provider } from &ap ...

Right now, I am sending out 3 GET requests for JSON files using Axios. I wonder if they are being loaded simultaneously or one after the other

In the process of developing my application, I am loading 3 JSON files to gather information about a game's characters, spells, and more. As of now, I have implemented 3 functions that utilize axios to make GET requests and store the responses. Howeve ...