通过 dat.gui 中的 json 文件填充下拉菜单答案

【问题标题】：filling drop down menu by json file in dat.gui通过 dat.gui 中的 json 文件填充下拉菜单
【发布时间】：2018-04-24 12:12:35
【问题描述】：

我正在使用 javascript 制作下拉菜单这是json文件

{
 "bg1":"assets/bg/people_bg.jpg",
 "bg2":"assets/bg/people_bg.jpg"
}

我只是想将名称作为 bg1 和 bg2 放入 bg(n) 以进行下拉，以便用户可以选择任何背景。这是我的 dat.gui() 代码；

{
controller = new function() {
this.bg = '';
}
var gui = new dat.GUI();
f1 = gui.addFolder('Sphere');
f1.add( controller, 'bg', displayingNameOfBackground).onChange(function() {
    //if change using their path to change background
            );

【问题讨论】：

您的 json 无效。用这个validator检查它。
已更正..我现在如何制作下拉菜单？
看我的回答。

标签： javascript json three.js dat.gui

【解决方案1】：

这取决于您想要的结果，但作为一种选择，您可以这样做：

var json = {
  "background": {
    "bg1": "assets/bg/people_bg1.jpg",
    "bg2": "assets/bg/people_bg2.jpg"
  }
};

var gui = new dat.GUI();
f1 = gui.addFolder('Sphere');
f1.add(json, "background", json.background).onChange(function(value) {
  alert(value) // do the stuff to change background
});
f1.open();

body {
  overflow: hidden;
  margin: 0;
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js"&gt;&lt;/script&gt;

【讨论】：