009材质颜色与纹理贴图

该系列文章主要用于记录学习three.js的过程，包括做的一些demo，笔记，以及个人思考；主要学习的课程是 神光的小册《three.js通关秘籍》，感兴趣的可以购买学习，质量还是可以的

材质的分类

不同的几何模型对应了很多不同的材质，此处我们列举常用的一些

点模型对应的材质

主要有PointsMaterial等

线模型对应的材质

主要有LineBasicMaterial``LineDashedMaterial（虚线）

此处以如何实现LineBasicMaterial来做个例子

注意点：

1. BoxGeometry是几何模型，需要通过EdgesGeometry 转换成线框模型才行
2. 必须设置line.computeLineDistances();

const boxGeometry = new THREE.BoxGeometry(100, 100, 100);

const geometry = new THREE.EdgesGeometry(boxGeometry);

const material = new THREE.LineDashedMaterial(({
    color: new THREE.Color('orange'),
    dashSize: 10,
    gapSize: 10
}));

const line = new THREE.Line(geometry, material);
line.computeLineDistances();

网络模型对应的材质

主要有MeshBasicMaterial（不受光影响)、MeshLambertMaterial（支持漫反射)、MeshPhongMaterial（镜面反射）,还有很多其他的

之前的章节对这块介绍的很多了，就不着重介绍了

材质的通用属性

颜色

如何获取材质的颜色

主要获取材质里面的颜色的相关方法,mesh.material.color下面的方法很多都可以，比较多

const color = mesh.material.color;
color.getHSL();
color.getHex();
color.getStyle();
color.getRGB()
color.getHexString();

如何设置材质的颜色

• 可以初始化材质的设置

const material = new THREE.MeshBasicMaterial(({
    color: new THREE.Color('orange') // 用内部单独的对象
    color: '0x00ff00' //十六进制也行
}));

• 可以后期设置

const color = mesh.material.color;
color.setHSL(0.5, 0.5, 0.5);
color.setHex(0xff0000);
color.setRGB(1, 0, 0);
color.setStyle('blue');

透明度

如何设置材质的透明度

通过transparent开启，再通过opacity设置

const material = new THREE.MeshBasicMaterial(({
    color: new THREE.Color('orange'),
    transparent: true,
    opacity: 0.5
}));

纹理贴图（重点）

如何理解

相当于把一张图片贴到几何体上面

基本使用

只需要加载对应的图片进去就行，比较简单

const loader = new THREE.TextureLoader();
const texture = loader.load('./diqiu.jpg');
const geometry = new THREE.SphereGeometry(100);
const material = new THREE.MeshBasicMaterial({
    map: texture
});

贴图重复

分为横向与纵向，相当与多复制几份一样的图，拼接成一张大图，贴到几何体上，这样就细节更加好，否则会出现图片被拉升的情况

texture.wrapS = THREE.RepeatWrapping
texture.wrapT = THREE.RepeatWrapping
texture.repeat.set(3, 3);

颜色空间

使颜色更符合真实性

texture.colorSpace = THREE.SRGBColorSpace;

aoMap属性

处理光的真实感，比如凹凸的地方，经过光照，会显示阴暗面

const material = new THREE.MeshBasicMaterial({
    map: texture,
    // 环境光遮蔽贴图
    // 模拟真实的环境光的遮蔽，比如 凸出来的地方光线更亮，凹的地方光线更暗
    aoMap: texture,
});