Search code examples
javascriptthree.jsdat.gui

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 Starsystem.

enter image description here

So solPlanets= ['Ilos', 'Tuchanka', 'Illium', 'Palaven'] is what shows in list 2 when you click on 2. On default, solPlanets shows ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune'] because default is jumpSwitcher = 1.

Problem is, the list will always show as solPlanets= ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune'], no matter if jumpSwitcher is 2.

I confirmed this by placing an alert message if jumpSwitcher is 2, and the alert pops up, but the list won’t change. This is likely to do with similiar issues where dat.gui doesn't update. I've tried listen() method as it was the main given answer, but it hasn't worked for me.

I've made a fiddle of it.

PS: I've asked this question before but now I realise it's likely to do with dat.gui not refreshing values and not javascript. So I deleted that question because it was kind of reaching a wrong audience, and I didn't make a fiddle for it.

Solution

  • You have to re-create the contorller for the list of planets.

    I modified your jsfiddle example here. The main stuff in

    function updatePlanets(id) {
    var controller = gui.__controllers[2];
    controller.remove();
    gui.add(data, 'Planets', planets[id]).onChange(doSomeStuff);

    //back to 0 element
    data.Planets = 0;
    gui.__controllers[2].updateDisplay();
}

    Also, it started to work, when I changed the version of DAT.GUI to 0.6.1