Question

我想传达一个＆＃34;左转＆＃34;按钮，在three.js应用程序中，使用左箭头图标（而不是仅标记它＆＃34;左＆＃34;）许多three.js示例使用dat.GUI来设置GUI控件（例如按钮，滑块）。在所有这些示例中，按钮显示为矩形框

是否可以用图标表示dat.GUI按钮？（或至少在按钮后面放置背景图片？）否则，是否有其他GUI替代品易于使用three.js？

编辑：

我无法将CSS代码嵌入到javascript中。我在下面添加了代码，当我点击按钮时，它会显示在控制台＆＃34; BEG setStyle＆＃34;中，即执行函数setStyle（）。但我并没有看到＆＃34; Nukeem全部的颜色或背景图像发生变化！＆＃34;按钮。

@ prisoner849你能帮我解决这个问题吗？

由于

var gui = new dat.GUI(),

var obj = {
    add:function()
    {
        console.log("clicked")
        updateTheta();
        this.setStyle();
    },
    setStyle:function()
    {
        console.log("BEG setStyle")
        this.color = "#00ff00";
        this.backgroundImage = "url('https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/Radiation.png')";
    }
};

gui.add(obj, 'add').name('Nukeem all!');

感谢。

Answer 1

TheJim01是对的。你可以用CSS做到这一点。

这只是一个粗略的概念：

var gui = new dat.GUI();
var obj = {
  add: function() {
    alert("clicked!")
  }
};
gui.add(obj, "add").name("Nuke'em all!");
gui.add(obj, "add").name("I'm Fine!");
gui.add(obj, "add").name("Harmony");

var fourth = gui.add(obj, "add").name("CSS is awesome!");
var fourthStyle = fourth.domElement.previousSibling.style;

fourthStyle.backgroundImage = 'url(https://cdn1.iconfinder.com/data/icons/hawcons/32/700035-icon-77-document-file-css-16.png)';
fourthStyle.backgroundRepeat = 'no-repeat';
fourthStyle.backgroundPosition = 'left';
fourthStyle.backgroundColor = 'white';
fourthStyle.color = 'black';

console.log(fourthStyle);

.function:nth-child(1) .property-name {
  background-image: url('https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/Radiation.png');
  background-repeat: no-repeat;
  background-position: right;
  background-color: gray;
  color: yellow;
}

.function:nth-child(2) .property-name {
  background-image: url('https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/OK.png');
  background-repeat: no-repeat;
  background-position: center;
  background-color: teal;
  color: aqua;
}

.function:nth-child(3) .property-name {
  background-image: url('https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/In-yang.png');
  background-repeat: no-repeat;
  background-position: left;
  background-color: pink;
  color: red;
  text-align: right;
}

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

表示带有图标的three.js GUI按钮

1 个答案: