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

Question

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

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

我只是想将名称作为 bg1 和 bg2 放到 bg(n) 中，这样用户就可以 select 任何 background.Here 是我的 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
            );

Answer 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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js"></script>

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

filling drop down menu by json file in dat.gui

javascript

json

three.js

dat.gui