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