【three.js】材质（Material）

基础网格材质（MeshBasicMaterial）【常用】

一个以简单着色（平面或线框）方式来绘制几何体的材质，这种材质不受光照的影响。常用于背影、2D图形等场景。

参数：

color：材质颜色。

opacity：透明度，取值范围为0（完全透明）到1（完全不透明）。

transparent：布尔值，指示材质是否透明。如果设置为true，则材质将考虑透明度的影响。

map：纹理贴图。

示例：

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, transparent: true, opacity: 0.5 
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

网格材质（MeshLambertMaterial）【常用】

一种非光泽表面的材质，没有镜面高光。适用于模拟一些表面（如未经处理的木材或石材），但不能模拟具有镜面高光的光泽表面。

受光照影响—— 漫反射

参数（继承自THREE.Material）：

color：材质颜色。

map：纹理贴图。

alphaMap：透明度贴图。

emissive：自发光颜色。

示例：

const material = new THREE.MeshLambertMaterial({ color: 0x00ff00 });

网格材质（MeshPhongMaterial）

支持漫反射和镜面反射光照模型，可以模拟物体表面对光线的漫反射和镜面反射效果。相比于Lambert材质，效果较好，但性能开销较大。

受光照影响——高光

参数：

color：材质颜色。

specular：镜面反射颜色。

shininess：光泽度，控制镜面高光的大小。

示例：

const material = new THREE.MeshPhongMaterial({ color: 0x00ff00, specular: 0x111111, shininess: 30 
});

法线网格材质（MeshNormalMaterial）【拓展：不常用】

根据法向向量来计算物体表面的颜色。这种材质可以显示网格的法线方向，常用于调试或特殊效果。

注意：法线材质并不支持镜面反射，这里的描述有误。正确的描述应该是它直接显示法线的方向，颜色通常与法线的方向有关。

示例：

const material = new THREE.MeshNormalMaterial();

物理材质（MeshStandardMaterial）

一种高度可配置的材质，专为基于物理的渲染（PBR）设计。通过调整金属度、粗糙度等参数，可以模拟出从非金属到金属的各种材质效果。

受光照影响——物理材质

参数：

color：材质颜色。

metalness：金属度，取值范围为0（非金属）到1（金属）。

roughness：粗糙度，取值范围为0（光滑）到1（粗糙）。

map：漫反射贴图。

envMap：环境贴图。

示例：

const material = new THREE.MeshStandardMaterial({ color: 0x00ff00, metalness: 0, roughness: 0.5 
});

物理材质（MeshPhysicalMaterial）

MeshPhysicalMaterial是Three.js中一种基于物理的材质类型，它提供了更多的物理属性来模拟现实世界中的材料特性。

与MeshStandardMaterial相比，MeshPhysicalMaterial具有额外的物理属性，如清漆层、透光率、反射率、光泽、折射率等，使其更适合模拟具有特定光学特性的材料，如透明材料、半透明材料等。

受光照影响——物理材质

参数：

color：基础颜色，默认为白色（0xffffff）。

map：基础颜色贴图，可以用来替代材质的颜色。

roughness：粗糙度，默认为0.5。粗糙度定义了表面的光滑程度，数值越高，表面越粗糙。

metalness：金属度，默认为0.5。金属度定义了表面的金属程度，数值越高，表面越像金属。

emissive：自发光颜色，默认为黑色（0x000000）。即使在没有光源的情况下，也会显示这个颜色。

clearcoat：清漆层厚度，默认为0。定义了表面的额外涂层，通常用于模拟汽车油漆的效果。

clearcoatRoughness：清漆层粗糙度，默认为0。定义了清漆层的粗糙程度。

ior（Index of Refraction）：折射率，默认为1.5。定义了材料的折射率，对于透明或半透明材料特别重要。

transmission：透射，默认为0。定义了光线透过材料的程度，对于透明或半透明材料特别重要。

其他：还包括normalMap（法线贴图）、roughnessMap（粗糙度贴图）、metalnessMap（金属度贴图）、emissiveMap（自发光贴图）、alphaMap（透明度贴图）、displacementMap（置换贴图）等纹理贴图属性，以及opacity（全局透明度）、transparent（是否开启透明模式）、side（指定材质在哪一面渲染）等通用属性。

适用于汽车油漆效果、玻璃、水、金属等材质的创建。

// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);// 加载基础颜色贴图
const textureLoader = new THREE.TextureLoader();
const colorTexture = textureLoader.load('path/to/color_texture.jpg');// 创建 MeshPhysicalMaterial
const material = new THREE.MeshPhysicalMaterial({map: colorTexture,         // 基础颜色贴图color: 0xffffff,           // 基础颜色（这里会被贴图覆盖，但可用于没有贴图的部分）emissive: 0x000000,        // 自发光颜色metalness: 0.5,            // 金属度roughness: 0.5,            // 粗糙度transmission: 1,           // 启用透射ior: 1.5,                  // 折射率thickness: 0.1,            // 厚度（对于透射效果重要）side: THREE.DoubleSide     // 双面渲染
});// 创建网格对象
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

MeshToonMaterial

这种材质使用卡通渲染效果，通常用于游戏和动画中。通过梯度纹理来控制阴影效果。

参数：

color：材质颜色。

gradientMap：梯度纹理，用于卡通阴影效果。

示例：

const gradientTexture = new THREE.TextureLoader()
.load('path/to/gradient.png');
const material = new THREE.MeshToonMaterial({ color: 0x00ff00, gradientMap: gradientTexture 
});

ShaderMaterial

通过自定义着色器来创建材质，适用于需要高级图形效果的情况。需要编写顶点和片段着色器代码。

参数：

vertexShader：顶点着色器代码。

fragmentShader：片段着色器代码。

示例：

const vertexShader = `varying vec2 vUv;void main() {vUv = uv;gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);}
`;const fragmentShader = `varying vec2 vUv;void main() {gl_FragColor = vec4(vUv, 0.5, 1.0);}
`;const material = new THREE.ShaderMaterial({vertexShader: vertexShader,fragmentShader: fragmentShader
});

线基础材质（LineBasicMaterial）

用于线条几何体的基本材质。

参数：

color：线条颜色。

linewidth：线条宽度（注意：在某些设备上可能不支持，默认为1）。

示例：

const material = new THREE.LineBasicMaterial({ color: 0xff0000 });
const geometry = new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(-10, 0, 0),new THREE.Vector3(0, 10, 0),new THREE.Vector3(10, -10, 0)
]);
const line = new THREE.Line(geometry, material);
scene.add(line);

注意：linewidth参数在某些渲染器和设备上可能不起作用，如果需要更粗的线条，可以考虑使用其他方法，如创建多边形来模拟线条。

LineDashedMaterial

用于创建虚线效果的材质。

参数：

color：线条颜色。

dashSize：虚线的线段长度。

gapSize：虚线的间隔长度。

scale：缩放比例，用于调整虚线的密度。

示例：

const material = new THREE.LineDashedMaterial({ color: 0xff0000, dashSize: 3, gapSize: 1, scale: 1 
});

点材质（PointsMaterial）

用于点云（点几何体）的材质。

参数：

color：点的颜色。

size：点的大小。

map：点的纹理贴图（注意：在某些情况下可能不支持）。

示例：

const material = new THREE.PointsMaterial({ color: 0xffffff, size: 0.05 });
const geometry = new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(-10, 10, 0),new THREE.Vector3(-10, -10, 0),new THREE.Vector3(10, -10, 0)
]);
const points = new THREE.Points(geometry, material);
scene.add(points);

请注意，示例代码中的路径和参数可能需要根据实际情况进行调整。

精灵材质（SpriteMaterial）

SpriteMaterial是Three.js中的一种材质类型，用于创建二维精灵（Sprite）。

精灵材质常用于渲染图标、粒子系统、UI元素等。

与普通的三维材质不同，SpriteMaterial通常与Sprite对象一起使用，它不支持光照模型，也不考虑摄像机的方向，总是面向摄像机展示其纹理。

参数：

map：基础颜色贴图，用于定义精灵的外观。

color：基础颜色，默认为白色（0xffffff）。

opacity：材质的全局透明度，默认为1（不透明）。

transparent：是否开启透明模式，默认为true。如果设置为true，则需要设置opacity或者使用alphaMap。

blending：混合模式，默认为THREE.NormalBlending。可以设置为THREE.AdditiveBlending、THREE.SubtractiveBlending等。

sizeAttenuation：是否启用尺寸衰减，默认为true。如果启用，则精灵的大小会根据距离摄像机的距离自动调整。

rotation：旋转角度，默认为0。用于控制精灵的旋转角度。

其他：还包括depthTest（是否进行深度测试）、depthWrite（是否写入深度缓冲区）、toneMapped（是否进行色调映射）、fog（是否应用雾效）等属性。

应用场景

SpriteMaterial适用于需要快速实现图标、粒子系统、UI元素等二维元素的场景。

// 加载纹理
const textureLoader = new THREE.TextureLoader();
const spriteTexture = textureLoader.load('path/to/sprite_texture.png');// 创建 SpriteMaterial
const spriteMaterial = new THREE.SpriteMaterial({map: spriteTexture,          // 基础颜色贴图color: 0xffffff,             // 基础颜色（这里会与贴图混合）opacity: 0.5,                // 透明度transparent: true,           // 开启透明模式sizeAttenuation: false,      // 禁用尺寸衰减（精灵大小不会随距离变化）rotation: Math.PI / 4        // 旋转45度
});// 创建 Sprite
const sprite = new THREE.Sprite(spriteMaterial);
sprite.scale.set(100, 100, 1);  // 设置精灵的大小（X和Y方向上的大小，Z方向通常保持为1）
sprite.position.set(0, 0, 0);   // 设置精灵的位置
scene.add(sprite);

友友们的每一次点赞，都是对我莫大的支持与激励！