three MeshPhysicalMaterial 物理网格材质

134 阅读6分钟

前言 物理网格材质 与其他材质不同的地方在于这个材质是主要与环境也就是场景环境图相关,基本不与其他的光线产生反应,在本章中环境光指的是环境图中产生的光线

attenuationColor 这个属性是环境图的光线穿过材质时光衰减后的颜色 颜色显示在材质内部

attenuationDistance 这个属性是环境图的光线穿过材质时的在多少距离衰减与衰减颜色形成渐变 颜色显示在材质内部

clearcoat 是 THREE.MeshPhysicalMaterial 中用于模拟材料表面额外透明层的属性,通常用于类似汽车漆、光滑塑料、玻璃等具有光亮表面的物体。这个属性让材质表面有一个独立的透明涂层,可以更真实地模拟光线的反射效果。这个属性与 attenuationColor 效果相反一个环境光穿透显示,一个控制环境光反射显示

clearcoatMap 这个属性决定了贴图中越接近黑色的地方会有高亮有光点

clearcoatNormalMap 这个属性决定了表面的法线反光,光颜色越接近黑色反射当前灯光的颜色,越接近白色时反射光前环境。

clearcoatNormalScale 较高值(如 new THREE.Vector2(3, 3)) :法线细节会更加明显,涂层表面凹凸感会更深,效果更加夸张。较低值(如 new THREE.Vector2(0.5, 0.5)):法线细节被削弱,凹凸感更为平滑,不那么明显。。

transmission 这个属性是环境图光线穿过时的材质的透明度,值越小环境光穿过距离的越多,值越大环境光穿过距离的越少,与 attenuationDistance 衰减共同决定环境光穿透的效果。

MeshPhysicalMaterial 有二十五个属性

  • attenuationColor 白光到达衰减距离时因吸收而变成的颜色。默认为白色 (0xffffff)。
  • attenuationDistance 介质的密度,以光与粒子相互作用之前在介质中传播的平均距离给出。该值以世界空间单位给出,并且必须大于零。默认为无穷大。 此时物体只受环境图影晌
        // 从 HDR 图像生成 PMREM 贴图
        const pmremTexture = pmremGenerator.fromEquirectangular(hdrTexture).texture;
        scene.background = pmremTexture;   // 作为背景图像
        scene.environment = pmremTexture;  // 作为全局环境贴图
        // 创建使用 MeshPhongMaterial 的材质
        const material = new THREE.MeshPhysicalMaterial({
            color: 0xffffff,               // 基本颜色
            transmission: 0.9,             // 透明度,1表示完全透明
            attenuationColor: new THREE.Color(0x0000ff),  // 光衰减的颜色(绿色)
            attenuationDistance: 2.0,      // 光衰减的距离,初始设置为2
            thickness: 5.0,                 // 模拟物体的厚度
            transparent: true
        });
        // 创建几何体,例如一个球体
        const Plane = new THREE.SphereGeometry(1, 32, 32);
        // 将材质和几何体结合生成网格
        const PlaneMesh = new THREE.Mesh(Plane, material);
        PlaneMesh.position.y = -2;
        PlaneMesh.position.x = 1;
        PlaneMesh.position.z = 1;
        // 将球体添加到场景中
        scene.add(PlaneMesh);
  • clearcoat 表示clear coat层的强度,范围从 0.0 到 1.0 m,当需要在表面加一层薄薄的半透明材质的时候,可以使用与clear coat相关的属性,默认为 0.0;
        // 从 HDR 图像生成 PMREM 贴图
        const pmremTexture = pmremGenerator.fromEquirectangular(hdrTexture).texture;
        scene.background = pmremTexture;   // 作为背景图像
        scene.environment = pmremTexture;  // 作为全局环境贴图
        // 创建使用 MeshPhongMaterial 的材质
        const material = new THREE.MeshPhysicalMaterial({
            color: 0xffffff,             
            clearcoat: 1.0,        // 完全的透明涂层
            clearcoatRoughness: 0.1, // 透明涂层的粗糙度,越接近0,越光滑
            metalness: 0.8,        // 金属度
            roughness: 0.2,        // 表面粗糙度
            envMapIntensity: 1.0   // 环境贴图强度,用于反射效果
        });
        // 创建几何体,例如一个球体
        const Plane = new THREE.SphereGeometry(1, 32, 32);
        // 将材质和几何体结合生成网格
        const PlaneMesh = new THREE.Mesh(Plane, material);
        PlaneMesh.position.y = -2;
        PlaneMesh.position.x = 1;
        PlaneMesh.position.z = 1;
        // 将球体添加到场景中
        scene.add(PlaneMesh);
  • clearcoatMap 这个贴图的红色通道值会与.clearcoat相乘作为整个clear coat的强度值层,默认为null。
        // 从 HDR 图像生成 PMREM 贴图
        const pmremTexture = pmremGenerator.fromEquirectangular(hdrTexture).texture;
        scene.background = pmremTexture;   // 作为背景图像
        scene.environment = pmremTexture;  // 作为全局环境贴图
        const textureLoader = new THREE.TextureLoader();
        const clearcoatMap = textureLoader.load(person);
        // 创建使用 MeshPhongMaterial 的材质
        const material = new THREE.MeshPhysicalMaterial({
            color: 0x00ff00,           // 基本材质颜色
            clearcoat: 1.0,            // 全局最大透明涂层强度
            clearcoatMap: clearcoatMap, // 使用 clearcoatMap 纹理控制透明涂层的局部强度
            clearcoatRoughness: 0.1,   // 透明涂层的粗糙度
        });
        // 创建几何体,例如一个球体
        const Plane = new THREE.SphereGeometry(1, 32, 32);
        // 将材质和几何体结合生成网格
        const PlaneMesh = new THREE.Mesh(Plane, material);
        PlaneMesh.position.y = -2;
        PlaneMesh.position.x = 1;
        PlaneMesh.position.z = 1;
        // 将球体添加到场景中
        scene.add(PlaneMesh);
  • clearcoatNormalMap 用于为clear coat层设置的独立的法线贴图,默认为null。
        // 从 HDR 图像生成 PMREM 贴图
        const pmremTexture = pmremGenerator.fromEquirectangular(hdrTexture).texture;
        scene.background = pmremTexture;   // 作为背景图像
        scene.environment = pmremTexture;  // 作为全局环境贴图
        const textureLoader = new THREE.TextureLoader();
        const clearcoatMap = textureLoader.load(person);
        // 创建使用 MeshPhongMaterial 的材质
        const material = new THREE.MeshPhysicalMaterial({
            color: 0x00ff00,
            clearcoat: 1.0,
            clearcoatNormalMap: clearcoatMap,    // 透明涂层法线贴图
            clearcoatNormalScale: new THREE.Vector2(2, 2),  // 控制法线的影响范围
            metalness: 0.5,
            roughness: 0.1
        });
        // 创建几何体,例如一个球体
        const Plane = new THREE.SphereGeometry(1, 32, 32);
        // 将材质和几何体结合生成网格
        const PlaneMesh = new THREE.Mesh(Plane, material);
        PlaneMesh.position.y = -2;
        PlaneMesh.position.x = 1;
        PlaneMesh.position.z = 1;
        // 将球体添加到场景中
        scene.add(PlaneMesh);
  • clearcoatNormalScale 衡量 clearcoatNormalMap 影响 clear coat层多少的值,由(0,0)到(1,1),默认为(1,1)。
  • clearcoatRoughness clear coat层的粗糙度,由0.0到1.0。 默认为0.0
  • clearcoatRoughnessMap 此纹理的绿色通道值会与.clearcoatRoughness相乘,用于改变clear coat的粗糙度,默认为null
  • defines WebGLRenderer使用它来选择shaders。
  • dispersion 是一个 Three.js 中用于 MeshPhysicalMaterial 的属性,定义了透射物体(如玻璃)中颜色的角度分离强度,即 色差效应(Chromatic Aberration)。这个属性用于模拟透明材质内部的 色散现象,即光线穿过材质时不同波长的光发生不同程度的弯折,导致颜色分离。
  • ior 为非金属材质所设置的折射率,范围由1.0到2.333。默认为1.5。
  • reflectivity 反射率,由0.0到1.0。默认为0.5, 相当于折射率1.5。这模拟了非金属材质的反射率。当metalness为1.0时,此属性无效。
  • sheen 光泽层的强度,范围是0.0到1.0。默认为0.0。
  • sheenRoughness 光泽层的粗糙度,由0.0到1.0。默认值是1.0。
  • sheenRoughnessMap 此纹理的透明通道会与.sheenRoughness相乘,用于改变光泽层的粗糙度,默认为null;
  • sheenColor 光泽颜色,默认为0x000000黑色。
  • sheenColorMap 此纹理的RGB通道会与.sheenColor光泽颜色相乘,最终作为光泽颜色结果,默认为null。
  • specularIntensity 用于控制非金属材质高光反射强度的浮点值。漫反射材质对应的值为0。范围从0.0到1.0。 默认值为1.0。
  • specularIntensityMap 此纹理的alpha通道将与.specularIntensity相乘,用于逐像素地控制高光强度。默认值为null。
  • specularColor 非金属材质在垂直于法线方向观看时的高光反射颜色。默认值为0xffffff,白色。
  • specularColorMap 此纹理的alpha通道将与.specularColor相乘,用于逐像素地控制高光颜色。默认值为null。
  • thickness 表面下方体积的厚度。该值在网格的坐标空间中给出。如果该值为 0,则材料为薄壁。否则,该材料是体积边界。默认值为 0。
  • thicknessMap 定义厚度的纹理,存储在 G 通道中。这将乘以.厚度。默认为空。
  • transmission 透光率(或者说透光性),范围从0.0到1.0。默认值是0.0。很薄的透明或者半透明的塑料、玻璃材质即便在几乎完全透明的情况下仍旧会保留反射的光线,透光性属性用于这种类型的材质。当透光率不为0的时候, opacity透明度应设置为1.
  • transmissionMap 此纹理的红色通道会与透光性.transmission相乘最为最终的透光性结果。默认为null。