用图标表示一个three.js GUI按钮

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

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

编辑：

我无法将css代码嵌入javascript中。 我在下面添加了代码，当我单击控制台中显示的按钮“BEG setStyle”时，即执行函数setStyle（）。 但我看不到“Nukeem all！”按钮的颜色或背景图像有任何变化

@你能帮我吗

谢谢

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!');

---

谢谢。

吉姆01是对的。你可以用CSS来做这个把戏

这里只是一个粗略的概念：

var gui=new dat.gui（）；
var obj={
添加：函数（）{
警报（“单击！”）
}
};
gui.add（obj，“add”）.name（“Nuke'em all！”）；
gui.add（obj，“add”）.name（“我很好！”）；
gui.add（obj，“add”）.name（“和谐”）；
var fourth=gui.add（obj，“add”）.name（“CSS太棒了！”）；
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='白色'；
fourthStyle.color='black'；
控制台日志（第四种样式）
。函数：第n个子项（1）。属性名称{
背景图像：url（'https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/Radiation.png');
背景重复：无重复；
背景位置：右；
背景颜色：灰色；
颜色：黄色；
}
.函数：第n个子（2）.属性名称{
背景图像：url（'https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/OK.png');
背景重复：无重复；
背景位置：中心；
背景色：青色；
颜色：浅绿色；
}
.函数：第n个子（3）.属性名称{
背景图像：url（'https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/In-yang.png');
背景重复：无重复；
背景位置：左；
背景颜色：粉红色；
颜色：红色；
文本对齐：右对齐；
}
您一定要使用dat.gui吗？使用HTML/CSS，您几乎可以做任何事情。就UI而言，three.js实际上只提供了一个画布元素，WebGL在其上绘制框架，该画布元素可以是HTML页面中的另一个元素，以及您需要的任何其他按钮/复选框/其他UI元素。谢谢。这（有一个背景图像/图标）适用于mecan，你可以告诉我如何嵌入你建议使用javascript代码的CSS代码。我用细节编辑了上面的问题。谢谢