用图标表示 three.js GUI 按钮

Question

我想在 three.js 应用程序中通过使用左箭头图标（而不是仅将其标记为 "left"）来传达 "Go Left" 按钮许多 three.js 示例使用 dat.GUI 来设置 GUI 控件（例如按钮、滑块）。在所有这些示例中，按钮显示为矩形框

是否可以用图标表示 dat.GUI 按钮？（或者至少在按钮后面放一张背景图片？）否则，是否有其他易于与 three.js 一起使用的 GUI 替代方案？

编辑：

我无法将 css 代码嵌入 javascript。我添加了下面的代码，当我点击它显示在控制台 "BEG setStyle" 的按钮时，即执行函数 setStyle()。但是我没有看到 "Nukeem all!" 按钮的颜色或背景图像发生变化。

@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 按钮

Represent a three.js GUI button with an icon

three.js

dat.gui