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;

posted @ 2025-03-25 18:13  lence  阅读(132)  评论(0)    收藏  举报