材质和着色器在Three.js中扮演着至关重要的角色，它们决定了物体的外观和视觉效果。在本章中，我们将深入学习Three.js中的高级材质和自定义着色器，以创建复杂和精美的视觉效果。
9.1 基本材质回顾
在开始深入探讨高级材质之前，回顾一下Three.js提供的几种基本材质：
- MeshBasicMaterial: 不受光照影响的材质。
- MeshStandardMaterial: 基于物理的标准材质。
- MeshLambertMaterial: 具有漫反射光照效果的材质。
- MeshPhongMaterial: 具有高光反射效果的材质。
9.2 使用纹理
纹理是将图像映射到几何体上的技术。Three.js中可以通过TextureLoader加载纹理，并将其应用到材质上。
示例代码：
// 创建一个场景
const scene = new THREE.Scene();
// 创建一个相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 创建一个渲染器并添加到HTML文档中
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 加载纹理
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load(\’path/to/texture.jpg\’);
// 创建带有纹理的材质
const material = new THREE.MeshBasicMaterial({ map: texture });
// 创建一个立方体并应用材质
const geometry = new THREE.BoxGeometry();
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();
9.3 高级材质属性
Three.js中的高级材质如MeshStandardMaterial和MeshPhysicalMaterial提供了更多属性，可以实现更为复杂的效果。
示例代码：
// 加载纹理
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load(\’path/to/texture.jpg\’);
const normalMap = textureLoader.load(\’path/to/normalMap.jpg\’);
const roughnessMap = textureLoader.load(\’path/to/roughnessMap.jpg\’);
const metalnessMap = textureLoader.load(\’path/to/metalnessMap.jpg\’);
// 创建高级材质
const material = new THREE.MeshStandardMaterial({
map: texture,
normalMap: normalMap,
roughnessMap: roughnessMap,
metalnessMap: metalnessMap,
roughness: 0.5,
metalness: 0.8
});
// 创建一个立方体并应用材质
const geometry = new THREE.BoxGeometry();
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();
