第五章 Three.js 材质与纹理

在本章中，我们将深入探讨 Three.js 中的材质和纹理。材质决定了几何体的外观，而纹理则为几何体提供了丰富的表面细节。通过学习本章的内容，你将了解如何创建和应用各种材质，以及如何使用纹理为几何体添加细节。

5.1 基本材质 (Basic Material)
THREE.MeshBasicMaterial 是一种最简单的材质，不受光照影响，适用于绘制简单的颜色和图像。

5.1.1 创建基本材质
创建一个带有基本材质的立方体：
import * as THREE from 'three';
// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建立方体几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 创建基本材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 创建网格
const cube = new THREE.Mesh(geometry, material);
// 将网格添加到场景
scene.add(cube);
// 渲染场景
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01; // 旋转立方体
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

5.2 Lambert 材质 (Lambert Material)
THREE.MeshLambertMaterial 是一种基于 Lambert 着色模型的材质，适用于需要基本光照效果的场景。

5.2.1 创建 Lambert 材质
创建一个带有 Lambert 材质的立方体：
// 创建 Lambert 材质
const lambertMaterial = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
// 创建网格
const lambertCube = new THREE.Mesh(geometry, lambertMaterial);
// 将网格添加到场景
scene.add(lambertCube);
// 添加光源
const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(10, 10, 10);
scene.add(light);

5.3 Phong 材质 (Phong Material)
THREE.MeshPhongMaterial 是一种基于 Phong 着色模型的材质，适用于需要高光反射效果的场景。

5.3.1 创建 Phong 材质
创建一个带有 Phong 材质的立方体：
// 创建 Phong 材质
const phongMaterial = new THREE.MeshPhongMaterial({ color: 0x00ff00, shininess: 100 });
// 创建网格
const phongCube = new THREE.Mesh(geometry, phongMaterial);
// 将网格添加到场景
scene.add(phongCube);
// 添加光源
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 5, 5).normalize();
scene.add(directionalLight);

5.4 标准材质 (Standard Material)
THREE.MeshStandardMaterial 是一种基于物理着色模型（PBR）的材质，能够模拟更加真实的光照效果。

5.4.1 创建标准材质
创建一个带有标准材质的立方体：
// 创建标准材质
const standardMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00, roughness: 0.5, metalness: 0.5 });
// 创建网格
const standardCube = new THREE.Mesh(geometry, standardMaterial);
// 将网格添加到场景
scene.add(standardCube);
// 添加环境光和点光源
const ambientLight = new THREE.AmbientLight(0x404040); // 环境光
scene.add(ambientLight);
const pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(10, 10, 10);
scene.add(pointLight);

5.5 纹理 (Textures)
纹理可以为几何体添加丰富的细节，例如图像、颜色、法线等。

5.5.1 加载纹理
Three.js 提供了 THREE.TextureLoader 类来加载纹理。
// 创建纹理加载器
const textureLoader = new THREE.TextureLoader();
// 加载纹理
const texture = textureLoader.load('path/to/texture.jpg');
// 创建带有纹理的材质
const texturedMaterial = new THREE.MeshBasicMaterial({ map: texture });
// 创建网格
const texturedCube = new THREE.Mesh(geometry, texturedMaterial);
// 将网格添加到场景
scene.add(texturedCube);

5.5.2 常见的纹理类型
颜色纹理：最常见的纹理，用于为几何体添加颜色。
法线纹理：用于添加表面细节，模拟复杂的表面结构。
环境光遮蔽纹理：用于模拟环境光的遮蔽效果。
5.6 高级材质 (Advanced Materials)
Three.js 还提供了一些高级材质，如 THREE.MeshPhysicalMaterial，用于更加复杂的物理渲染。

5.6.1 创建物理材质
// 创建物理材质
const physicalMaterial = new THREE.MeshPhysicalMaterial({
    color: 0x00ff00,
    roughness: 0.5,
    metalness: 0.5,
    clearcoat: 1.0,
    clearcoatRoughness: 0.1
});
// 创建网格
const physicalCube = new THREE.Mesh(geometry, physicalMaterial);
// 将网格添加到场景
scene.add(physicalCube);

总结
在本章中，我们介绍了 Three.js 中的各种材质和纹理，包括基本材质、Lambert 材质、Phong 材质、标准材质以及物理材质。同时，我们还探讨了如何加载和应用纹理。通过这些内容的学习，你已经掌握了如何为几何体添加丰富的表面细节和光照效果。在接下来的章节中，我们将进一步探讨更多高级功能和应用。
————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。                        
原文链接：https://blog.csdn.net/imdeity/article/details/139574165