threejs材质和纹理

材质和纹理

纹理加载

• THREE.TextureLoader：用于加载普通二维纹理，如颜色纹理、环境光遮蔽纹理、高度纹理等
• THREE.CubeTextureLoader：用于加载立方体纹理，通常用于环境映射。

纹理过滤模式

• minFilter：设置纹理缩小显示时的过滤模式，常见取值有 THREE.NearestFilter 和 THREE.LinearFilter。THREE.NearestFilter 不进行插值处理，速度快但可能产生锯齿；THREE.LinearFilter 会进行线性插值，使纹理更平滑。如 gradientTexture.minFilter = THREE.NearestFilter;

• magFilter：设置纹理放大显示时的过滤模式，同样可选择 THREE.NearestFilter、THREE.LinearFilter 等模式 ，如 gradientTexture.magFilter = THREE.NearestFilter;

• generateMipmaps：控制是否生成 mipmaps（一组不同分辨率的纹理）。当 minFilter 为 THREE.NearestFilter 时，通常设为 false 以避免生成额外纹理，如 gradientTexture.generateMipmaps = false;

纹理相关属性设置

• 重复与环绕：可通过 repeat 属性设置纹理在 U（水平）和 V（垂直）方向的重复次数，wrapS 和 wrapT 属性设置纹理的环绕模式，如 THREE.RepeatWrapping（重复环绕）和 THREE.MirroredRepeatWrapping（镜像重复环绕）

• 偏移和旋转：offset 属性设置纹理在 U 和 V 方向的偏移量，rotation 属性设置旋转角度，center 属性指定旋转中

特殊纹理介绍

• 环境映射纹理：使用立方体纹理作为环境映射，赋予对象反射周围环境的效果，如 THREE.MeshStandardMaterial 的 envMap 属性设置环境映射纹理 material.envMap = environmentMapTexture;

• 环境光遮蔽纹理（aoMap）：用于为对象添加阴影效果，使纹理较暗的部分产生阴影。使用时需要为几何体设置第二组 UV 坐标（如 uv2），如 sphere.geometry.setAttribute("uv2", new THREE.BufferAttribute(sphere.geometry.attributes.uv.array, 2)); 配合 material.aoMap = doorAmbientOcclusionTexture; 等设置来实现。

• 位移贴图纹理（displacementMap）：可改变对象表面的形状，使用时需设置 displacementScale 控制位移的程度，并且通常需要更多的几何体细分。如 material.displacementMap = doorHeightTexture; material.displacementScale = 0.05;

• 法线贴图纹理（normalMap）：用于改变对象表面的法线方向，从而影响光照效果，normalScale 属性可控制法线的强度，如 material.normalMap = doorNormalTexture; material.normalScale.set(0.1, 1);

• 金属度贴图纹理（metalnessMap） 和 粗糙度贴图纹理（roughnessMap）：在基于物理的渲染材质（如 THREE.MeshStandardMaterial）中，用于控制对象表面的金属度和粗糙度，如 material.metalnessMap = doorMetalnessTexture; material.roughnessMap = doorRoughnessTexture;

• 渐变纹理（gradientTexture）：可用于实现卡通着色（如 THREE.MeshToonMaterial 的 gradientMap 属性）等效果，如 const material = new THREE.MeshToonMaterial(); material.gradientMap = gradientTexture; 需设置合适的过滤模式。

材质类型及特点

• THREE.MeshBasicMaterial
  基础材质，不受光照影响。
  可设置纹理、颜色、线框显示、透明度等属性。

• THREE.MeshNormalMaterial
  用于显示对象的法线，法线是垂直于对象表面的向量。
  可设置平面着色（flatShading）。

• THREE.MeshMatcapMaterial
  根据对象的法线显示颜色，使用 matcap 纹理。

• THREE.MeshDepthMaterial
  根据对象与相机的距离显示深度，离相机近的部分较暗，反之较亮。

• THREE.MeshLambertMaterial
  使用兰伯特反射模型，根据光源显示对象颜色。

• THREE.MeshPhongMaterial
  使用冯氏反射模型，与 MeshLambertMaterial 类似，但具有更平滑的着色效果，性能相对较低。
  可设置光泽度（shininess）和高光颜色（specular）。

• THREE.MeshToonMaterial
  使用卡通着色，可通过 gradientMap 设置渐变颜色，需将纹理的 minFilter 和 magFilter 设置为 THREE.NearestFilter。

• THREE.MeshStandardMaterial
  使用基于物理的渲染（PBR）材质，是最真实的材质类型。
  可设置金属度（metalness）、粗糙度（roughness）、环境光遮蔽（aoMap）、位移贴图（displacementMap）等属性。

纹理应用到材质

不同的材质类型可以通过相应属性来应用纹理，如 THREE.MeshBasicMaterial 的 map 属性、THREE.MeshStandardMaterial 的 map、aoMap、metalnessMap、roughnessMap、normalMap、envMap 等属性。例如 const material = new THREE.MeshStandardMaterial(); material.envMap = environmentMapTexture;