3. 模型材质颜色(Color对象)
# 模型材质颜色(Color对象)
你去文档搜索MeshBasicMaterial、MeshLambertMaterial、MeshPhongMaterial等网格材质,可以看到他们都有一个颜色属性.color。
下面结合threejs文档,带领大家探索一下,如何通过查询文档来修改模型材质的颜色值.color。
# 材质颜色属性.color
如果你想修改材质的颜色属性.color,那么你就需要了解该属性对应属性值的形式。
查文档,找到
.color属性,可以发现threejs材质对象颜色属性.color是threejs的颜色对象Color。console.log()打印:浏览器控制台查看材质颜色属性的属性值
console.log('material.color',material.color);
# 颜色对象Color
查看颜色对象Color文档,可以看到颜色对象有三个属性,分别为.r、.g、.b,表示颜色RGB的三个分量。
// 创建一个颜色对象
const color = new THREE.Color();//默认是纯白色0xffffff。
console.log('查看颜色对象结构',color);//可以查看rgb的值
// 查看Color对象设置0x00ff00对应的的.r、.g、.b值
const color = new THREE.Color(0x00ff00);
# 通过.r、.g、.b属性改变颜色值
color.r = 0.0;
color.b = 0.0;
# 改变颜色的方法
查看Color文档,可以看到Color提供了.setHex()、.setRGB()、.setStyle()、.set()等修改颜色值的方法。
color.setRGB(0,1,0);//RGB方式设置颜色
color.setHex(0x00ff00);//十六进制方式设置颜色
color.setStyle('#00ff00');//前端CSS颜色值设置颜色
.setHex()、.setStyle()风格的颜色值都可以作为.set()的参数
color.set(0x00ff00);//十六进制方式设置颜色
color.set('#00ff00');//前端CSS颜色值设置颜色
# 重置模型材质的颜色
十六进制颜色
material.color.set(0x00ffff);
前端CSS风格颜色值:'#00ff00'、'rgb(0,255,0)'等形式
material.color.set('#00ff00');
material.color.set('rgb(0,255,0)');