1.4材质 (Materials)

1.4材质 (Materials)

Three.js 材质 (Materials) 详解

在 Three.js 中，材质 (Materials) 定义了 3D 物体表面的外观和行为。它们决定了物体如何反射光线、呈现颜色、以及其他视觉特性。理解材质是创建逼真和引人入胜的 3D 场景的关键。

1. 材质的基础

材质是 Three.js 中 THREE.Material 类的实例，但通常我们不会直接使用这个基类，而是使用其派生类，这些派生类提供了各种预定义的材质类型，每种类型都有不同的属性和光照模型。

Graph TD:

2. 常见的材质类型

以下是 Three.js 中一些最常用的材质类型：

• THREE.MeshBasicMaterial: 最简单的材质，不受光照影响，直接显示颜色或纹理。

• THREE.MeshLambertMaterial: 对光照有反应，但使用漫反射光照模型，表面看起来比较柔和。

• THREE.MeshPhongMaterial: 使用 Phong 光照模型，具有镜面反射高光，表面看起来更光滑、更有光泽。

• THREE.MeshStandardMaterial: 基于物理的渲染 (PBR) 材质，提供更逼真的光照效果，适用于各种光照条件。

• THREE.MeshPhysicalMaterial: MeshStandardMaterial 的扩展，增加了对透明度和薄膜效应的支持。

• THREE.PointsMaterial: 用于渲染粒子系统。

• THREE.LineBasicMaterial: 用于渲染线条。

• THREE.ShaderMaterial: 允许你使用自定义的 GLSL 着色器来定义材质的外观。

3. 材质的通用属性

所有材质都继承自 THREE.Material 类，因此它们共享一些通用的属性：

• color: 材质的颜色，使用 THREE.Color 对象表示。

• side: 指定渲染哪个面（正面、背面或双面）。常见的值有 THREE.FrontSide、THREE.BackSide 和 THREE.DoubleSide。

• opacity: 材质的不透明度，取值范围为 0 到 1。

• transparent: 一个布尔值，指示材质是否透明。如果设置为 true，则需要正确设置 opacity 属性。

• visible: 一个布尔值，指示材质是否可见。

• wireframe: 一个布尔值，指示是否以线框模式渲染材质。

• map: 一个 THREE.Texture 对象，用作材质的颜色贴图。

• normalMap: 一个 THREE.Texture 对象，用作材质的法线贴图，用于模拟表面的细节。

• roughnessMap: 一个 THREE.Texture 对象，用作材质的粗糙度贴图，用于控制表面的粗糙程度。

• metalnessMap: 一个 THREE.Texture 对象，用作材质的金属度贴图，用于控制表面的金属程度。

4. 代码实践：创建和使用材质

以下是一些代码示例，演示如何创建和使用不同的材质类型：

4.1 MeshBasicMaterial

// 创建一个红色的 MeshBasicMaterial
const basicMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
// 创建一个几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 创建一个网格，并将几何体和材质关联起来
const cube = new THREE.Mesh(geometry, basicMaterial);
scene.add(cube);
​

4.2 MeshLambertMaterial

// 创建一个绿色的 MeshLambertMaterial
const lambertMaterial = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
// 创建一个几何体
const geometry = new THREE.SphereGeometry(0.5, 32, 32);
// 创建一个网格，并将几何体和材质关联起来
const sphere = new THREE.Mesh(geometry, lambertMaterial);
scene.add(sphere);
// 添加一个环境光，否则 Lambert 材质不会显示任何颜色
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
// 添加一个方向光，以照亮物体
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
​

4.3 MeshPhongMaterial

// 创建一个蓝色的 MeshPhongMaterial，并设置镜面反射高光
const phongMaterial = new THREE.MeshPhongMaterial({
    color: 0x0000ff,
    specular: 0xffffff, // 镜面反射的颜色
    shininess: 30,      // 高光的强度
});
// 创建一个几何体
const geometry = new THREE.TorusGeometry(0.7, 0.2, 32, 100);
// 创建一个网格，并将几何体和材质关联起来
const torus = new THREE.Mesh(geometry, phongMaterial);
scene.add(torus);
// 添加环境光和方向光，与 Lambert 材质类似
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
​

4.4 MeshStandardMaterial

// 创建一个 MeshStandardMaterial，并设置粗糙度和金属度
const standardMaterial = new THREE.MeshStandardMaterial({
    color: 0xffffff,
    roughness: 0.5,   // 粗糙度，取值范围为 0 到 1
    metalness: 0.5,   // 金属度，取值范围为 0 到 1
});
// 创建一个几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 创建一个网格，并将几何体和材质关联起来
const cube = new THREE.Mesh(geometry, standardMaterial);
scene.add(cube);
// 添加环境光和方向光，与 Lambert 材质类似
const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
​

4.5 使用纹理贴图

// 加载纹理贴图
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/your/texture.jpg'); // 替换为你的纹理文件路径
// 创建一个 MeshStandardMaterial，并将纹理贴图应用到颜色贴图
const textureMaterial = new THREE.MeshStandardMaterial({
    map: texture,
    roughness: 0.5,
    metalness: 0.5,
});
// 创建一个几何体
const geometry = new THREE.SphereGeometry(1, 32, 32);
// 创建一个网格，并将几何体和材质关联起来
const sphere = new THREE.Mesh(geometry, textureMaterial);
scene.add(sphere);
// 添加环境光和方向光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
​

注意: 在使用纹理时，请确保纹理文件路径正确，并且纹理文件已经加载到项目中。

5. 材质的性能考虑

材质的选择会直接影响渲染性能。一般来说，更复杂的材质（如 MeshStandardMaterial 和 MeshPhysicalMaterial）需要更多的计算资源。

• 减少材质数量: 尽量使用相同的材质来渲染多个物体，减少渲染器的状态切换。

• 优化纹理: 使用适当大小和格式的纹理，并使用纹理压缩技术（如 DDS 或 ETC）来减少纹理的内存占用和加载时间。

• 避免不必要的计算: 如果不需要光照效果，可以使用 MeshBasicMaterial，避免额外的光照计算。

• LOD (Level of Detail): 对于远处的物体，可以使用更简单的材质和更低的几何体细节来提高性能。

6. 自定义材质：ShaderMaterial

THREE.ShaderMaterial 允许你使用自定义的 GLSL 着色器来完全控制材质的外观。这提供了最大的灵活性，但也需要你对着色器编程有一定的了解。

const shaderMaterial = new THREE.ShaderMaterial({
    vertexShader: `
        void main() {
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
    `,
    fragmentShader: `
        void main() {
            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色
        }
    `,
});
const geometry = new THREE.PlaneGeometry(1, 1);
const plane = new THREE.Mesh(geometry, shaderMaterial);
scene.add(plane);
​

解释:

• vertexShader: 顶点着色器，负责处理顶点的位置。

• fragmentShader: 片元着色器，负责处理每个像素的颜色。

7. 总结

材质是 Three.js 中非常重要的概念，它们决定了 3D 物体的外观。通过选择合适的材质类型、设置正确的属性、以及使用纹理贴图，你可以创建出各种各样逼真的 3D 场景。 记住要考虑性能因素，并根据需要使用自定义的 ShaderMaterial 来实现更高级的效果。 掌握材质的使用是成为 Three.js 高手的关键一步。