这一篇主要介绍 MeshLambertMaterial 材质，这个材质在官网中介绍主要用于木材或石头的未涂漆材质反光材质但是精度不是很高，通过这个可以优化一些性能。
在使用 alphaMap 透明贴图时要注意要启用透明度，也就是设置 transparent 为 true 还需要注意调整 alphaTest 的值 如果透明测试的值为 0 时 显示的透明效果最理想。调整为0.5时可以使得透明硬化
在使用 aoMap 时需要注意 设置 aoMapIntensity 遮挡强度， aoMapIntensity: 0 完全禁用遮挡效果。 aoMapIntensity: 1 完全使用 aoMap 的效果 aoMapIntensity: 2 增强遮挡效果，可能会使阴影变得更深。，还是一个就是使用 aoMap 时需要 aoMap 是一个灰度图，纯白色表示不摭挡光照效果，纯黑色表示完全摭挡光照效果，这个是配合 map 使用的
在使用 bumpMap 时 要注意贴图黑色部分由 bumpScale 决定 凹凸强度 为负数时 黑色部分 凹 陷 为正数时 黑色部分 凸出
MeshLambertMaterial 有 28个属性
- alphaMap alpha贴图是一张灰度纹理，用于控制整个表面的不透明度。（黑色：完全透明；白色：完全不透明）。 默认值为null。
- aoMap （环境光遮蔽贴图，Ambient Occlusion Map） 该纹理的红色通道用作环境遮挡贴图。默认值为null。aoMap需要第二组UV。
// 创建几何体和材质
const geometry = new THREE.PlaneGeometry(5, 5, 256, 256); // 创建有更多顶点的平面
// 初始化一个加载器
const loader = new THREE.TextureLoader();
const texture0 = await loader.load(imgPng);
const texture1 = await loader.load(person);
// 为几何体启用第二组 UV 坐标（aoMap 使用的是第二套 UV）
geometry.setAttribute('uv2', new THREE.BufferAttribute(geometry.attributes.uv.array, 2));
const material = new THREE.MeshLambertMaterial({
map: texture1, // 基础颜色贴图
aoMap: texture0, // AO 贴图
aoMapIntensity: 2.0, // AO 强度 值越大越 map 颜色不显示 为0时完全不起作用
});
const torus = new THREE.Mesh(geometry, material);
scene.add(torus);
// 添加光源
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // 环境光
scene.add(ambientLight);
- aoMapIntensity aoMap 的强度默认值是 1
- bumpMap 用于创建凹凸贴图的纹理。黑色和白色值映射到与光照相关的感知深度。凹凸实际上不会影响对象的几何形状，只影响光照。如果定义了法线贴图，则将忽略该贴图。
// 初始化一个加载器
const loader = new THREE.TextureLoader();
const texture0 = await loader.load(imgPng);
const texture1 = await loader.load(person);
const material = new THREE.MeshLambertMaterial({
map: texture0, // 基础颜色贴图
bumpMap: texture1, // 凹凸贴图
bumpScale: 1, // 凹凸强度 为负数时 黑色部分 凹 陷 为正数时 黑色部分 凸出
});
const torus = new THREE.Mesh(geometry, material);
scene.add(torus);
// 添加光源
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // 环境光
scene.add(ambientLight);
- bumpScale 凹凸贴图会对材质产生多大影响。典型范围是0-1。默认值为1。为效果最明显
- combine 如何将表面颜色的结果与环境贴图（如果有）结合起来。 选项为THREE.MultiplyOperation（默认值），THREE.MixOperation， THREE.AddOperation。如果选择多个，则使用.reflectivity在两种颜色之间进行混合。
- displacementMap 位移帖图 当贴中为靠近黑色时进行 偏移，为白色时不变 由 displacementScale displacementBias这两个参数控制
// 创建几何体和材质
const geometry = new THREE.PlaneGeometry(5, 5, 256, 256); // 创建有更多顶点的平面
// 初始化一个加载器
const loader = new THREE.TextureLoader();
const texture0 = await loader.load(imgPng);
const texture1 = await loader.load(person);
const material = new THREE.MeshLambertMaterial({
map: texture0, // 基础颜色贴图
displacementMap: texture1, // 置换贴图
displacementScale: 0.5, // 控制置换强度，减少位移幅度
displacementBias: 0.5 // 设置偏移值，确保黑色部分不会向内移动
});
const torus = new THREE.Mesh(geometry, material);
scene.add(torus);
// 添加光源
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // 环境光
scene.add(ambientLight);
- displacementScale 位移贴图对网格的影响程度（黑色是无位移，白色是最大位移）。如果没有设置位移贴图，则不会应用此值。默认值为1。
- displacementBias 位移贴图在网格顶点上的偏移量。如果没有设置位移贴图，则不会应用此值。默认值为0。
- emissive 材质的放射（光）颜色，基本上是不受其他光照影响的固有颜色。默认为黑色。
- emissiveMap 设置放射（发光）贴图。默认值为null。放射贴图颜色由放射颜色和强度所调节。 如果你有一个放射贴图，请务必将放射颜色设置为黑色以外的其他颜色。
// 创建几何体和材质
const geometry = new THREE.PlaneGeometry(5, 5, 256, 256); // 创建有更多顶点的平面
// 初始化一个加载器
const loader = new THREE.TextureLoader();
const texture1 = await loader.load(person);
const material = new THREE.MeshLambertMaterial({
color: 0xffffff, // 白色基础颜色
emissive: new THREE.Color(0x00ff00), // 绿色发光
emissiveMap: texture1, // 发光贴图
emissiveIntensity: 1.0 // 发光强度
});
const torus = new THREE.Mesh(geometry, material);
scene.add(torus);
// 添加光源
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // 环境光
scene.add(ambientLight);
- emissiveIntensity 放射光强度。调节发光颜色。默认为1
- envMap 环境贴图。默认值为null。
// 创建 PMREM 生成器
const pmremGenerator = new PMREMGenerator(renderer);
// 使用 RGBELoader 加载 HDR 环境图
new RGBELoader().load(hdrImg, (hdrTexture) => {
console.log(hdrTexture,"hdrTexture");
// 从 HDR 图像生成 PMREM 贴图
const pmremTexture = pmremGenerator.fromEquirectangular(hdrTexture).texture;
scene.background = pmremTexture; // 作为背景图像
scene.environment = pmremTexture; // 作为全局环境贴图
// 创建几何体
const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshLambertMaterial({
color: 0xffffff, // 基础颜色
envMap: pmremGenerator.fromScene(scene, 0).texture, // 环境贴图
reflectivity: 0.5 // 反射强度
});
const torus = new THREE.Mesh(geometry, material);
scene.add(torus);
// 添加光源
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // 环境光
scene.add(ambientLight);
// 创建 OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
// 渲染循环
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
animate();
});
- flatShading 定义材质是否使用平面着色进行渲染。默认值为false。
- fog 材质是否受雾影响。默认为true。
- lightMap 光照贴图。默认值为null。lightMap需要第二组UV。 lightMap 是光照贴图，表示物体接收的间接光照。它与 lightMapIntensity 一起控制物体表面的亮暗。
- lightMapIntensity 烘焙光的强度。默认值为1。
- map 颜色贴图
- normalMap 用于创建法线贴图的纹理。RGB值会影响每个像素片段的曲面法线，并更改颜色照亮的方式。法线贴图不会改变曲面的实际形状，只会改变光照。
- normalMapType 选项为THREE.TangentSpaceNormalMap（默认）和THREE.ObjectSpaceNormalMap
- normalScale 法线贴图对材质的影响程度。典型范围是0-1。默认值是Vector2设置为（1,1）。
- reflectivity 环境贴图对表面的影响程度; 见.combine。默认值为1，有效范围介于0（无反射）和1（完全反射）之间。
- refractionRatio 空气的折射率（IOR）（约为1）除以材质的折射率。它与环境映射模式THREE.CubeRefractionMapping 和THREE.EquirectangularRefractionMapping一起使用。
- specularMap 材质使用的高光贴图。默认值为null。
- wireframe 将几何体渲染为线框。默认值为false（即渲染为平面多边形）。
- wireframeLinecap 定义线连接节点的样式。可选值为 'round', 'bevel' 和 'miter'。默认值为 'round'。
- wireframeLinewidth 控制线框宽度。默认值为1。
