通过查询文档来实现材质颜色的修改。这次观看的threejs视频教程 老师教授的是如果通过查询文档来实现材质颜色的修改，主要讲的是查询文档。但是通过文本不好写查询文档的过程，所这里只写实现代码.

创建颜色对象

// 创建颜色对象
const color = new THREE.Color(0x00ff00)  //默认是纯白色0xffffff
console.log('查看颜色对象结构', color)
// 查看color对象设置的0x00ff00对应值是r g b值

将颜色对象赋值给材质属性

const material = new THREE.MeshPhongMaterial({
    color: 0xff0000, //红色
    shininess: 100, //高光部分亮度默认是30
    specular: 0xffffff //高光颜色 默认是0x111111
})
// 创建颜色对象
const color = new THREE.Color(0x00ff00)  //默认是纯白色0xffffff
material.color = color

修改颜色前

修改颜色后

修改rgb

也可以修改颜色的rgb的值来实现颜色的修改，不过我们网页中的rgb是0-255，threejs颜色中的rgb是0-1

// 创建颜色对象
const color = new THREE.Color(0x00ff00)  //默认是纯白色0xffffff
console.log('查看颜色对象结构', color)
// 查看color对象设置的0x00ff00对应值是r g b值
color.r = 1
color.g = 0
color.b = 1
material.color = color

通过方法setRGB修改

r — 红色通道的值在0到1之间。
g — 绿色通道的值在0到1之间。
b — 蓝色通道的值在0到1之间。

color.setRGB(0, 1, 0)

通过方法setHex修改

十六进制方式设置颜色

color.setHex(0xff00ff) //十六进制颜色设置

通过方法setStyle修改

前端css颜色值修改

color.setStyle('#ffffff') //前端css颜色

可以直接使用set

可以把set当做是setHex和setStyle的简写

color.set(0x00ffff) //十六进制颜色设置
color.set('#00ff00') //前端css颜色