在本章中，我们将深入探讨 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 材质、标准材质以及物理材质。同时，我们还探讨了如何加载和应用纹理。通过这些内容的学习，你已经掌握了如何为几何体添加丰富的表面细节和光照效果。在接下来的章节中，我们将进一步探讨更多高级功能和应用。
