Three.js 材质和纹理的秘密：让你的模型更加真实

Three.js 材质和纹理的秘密：让你的模型更加真实

在 3D 开发中，材质和纹理是为模型赋予真实感的核心元素。材质定义了物体表面的外观属性，而纹理则进一步为这些属性提供细节，让你的模型从“好看”变成“惊艳”。今天我们就来揭开 Three.js 中材质和纹理的秘密，通过丰富的例子，帮你掌握它们的使用技巧！

---

一、材质与纹理的区别

• 材质（Material）：描述物体的表面特性，比如颜色、光滑度、金属感等。
• 纹理（Texture）：是材质的一部分，通过图像的形式为材质添加更多细节，比如木纹、大理石花纹、金属锈迹等。

在 Three.js 中，材质通常由 THREE.Material 的子类实现，而纹理是通过 THREE.Texture 来加载和应用。

---

二、Three.js 中常见的材质类型

材质类型	特点	示例代码
MeshBasicMaterial	最基础的材质，不受光照影响，适合简单的颜色或贴图显示。	new THREE.MeshBasicMaterial({ color: 0xff0000 })
MeshStandardMaterial	支持物理渲染，受光照影响，可调节金属度和粗糙度，常用于真实感模型。	new THREE.MeshStandardMaterial({ metalness: 0.5, roughness: 0.5 })
MeshLambertMaterial	使用漫反射模型计算光照，适合表现柔和的表面光照效果。	new THREE.MeshLambertMaterial({ color: 0x00ff00 })
MeshPhongMaterial	支持镜面高光效果，适合表现光滑、反光的表面。	new THREE.MeshPhongMaterial({ shininess: 100 })
MeshToonMaterial	卡通材质，使用扁平化的光照效果，适合漫画风格。	new THREE.MeshToonMaterial({ color: 0x0000ff })
MeshPhysicalMaterial	MeshStandardMaterial 的高级版本，增加透明度等物理属性控制。	new THREE.MeshPhysicalMaterial({ clearcoat: 1.0 })
ShaderMaterial	可完全自定义渲染逻辑，适合高级效果，比如粒子效果或动态纹理。	new THREE.ShaderMaterial({ uniforms, vertexShader, fragmentShader })

---

三、加载纹理

纹理在材质中的重要性不言而喻，它们为表面赋予逼真的细节。Three.js 提供了一个强大的 THREE.TextureLoader 来加载纹理。

1. 基本纹理加载

以下示例展示如何为立方体加载简单的木纹贴图：

const textureLoader = new THREE.TextureLoader();
const woodTexture = textureLoader.load('path/to/wood.jpg'); // 替换为你的图片路径

const material = new THREE.MeshBasicMaterial({
    map: woodTexture });
const geometry = new THREE.BoxGeometry(1, 1,