33. 模型材质颜色(Color对象)

你去文档搜索MeshBasicMaterial、MeshLambertMaterial、MeshPhongMaterial等网格材质，可以看到他们都有一个颜色属性.color。

下面结合threejs文档，带领大家探索一下，如何通过查询文档来修改模型材质的颜色值.color。

材质颜色属性.color

如果你想修改材质的颜色属性.color,那么你就需要了解该属性对应属性值的形式。

1. 查文档，找到.color属性，可以发现threejs材质对象颜色属性.color是threejs的颜色对象Color。

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

原文地址：https://blog.csdn.net/Miller777_/article/details/142377268

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！