但是颜色显示部分点击不了，如何解决？(标签-UI)

Question

react+ThreeJs GUI工具点击没效果

const colors={
      cubeColor:'red',
    }
    gui.addColor(colors,'cubeColor').name('立方体颜色').onChange(val=>{
      console.log(val);
      box.material.color.set(val)
    })
    gui.add(box.material，'wireframe').name('是否显示线框')

这是gui改变立方体颜色的代码

显示这样的，但是颜色显示部分点击不了，
在我的vue3项目中可以点击，代码是一样的啊

let colors={
    cubeColor:'pink',
    parentColor:'blue'
}
gui.addColor(colors,'cubeColor').name('立方体颜色').onChange(val=>{
    cube.material.color.set(val)
})

不知道为什么

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

这个问题可能是由于Three.js的Color对象和DOM颜色值之间的转换问题导致的。你可以尝试将颜色值转换为Three.js的Color对象，然后再设置给立方体。以下是修改后的代码：

import { Color } from 'three';

let colors = {
    cubeColor: 'pink',
    parentColor: 'blue'
}
gui.addColor(colors, 'cubeColor').name('立方体颜色').onChange(val => {
    let color = new Color(val);
    cube.material.color.set(color);
})

这样，当你在GUI中更改立方体颜色时，应该可以正常显示并点击了。