Three.js - 11. Use of PBR material metallicity, roughness and environment maps

Three.js - 11. Use of PBR material metallicity, roughness and environment maps

metalnessMetallicity

Metallicity attribute.metalness represents the degree to which the material resembles metal. For non-metallic materials, such as wood or stone, use 0.0 and for metal, use 1.0.

new THREE.MeshStandardMaterial({
    
    
    metalness: 1.0,//金属度属性
})
// 或者
// mesh.material.metalness = 1.0;//金属度

    const geometry = new THREE.BoxGeometry(10, 10, 10);
    // 材质
    const material = new THREE.MeshStandardMaterial({
    
    
      color: 0x51efe4, 
      metalness: 1,
    });
    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(0, 0, 0);
    scene.add(mesh);
    // mesh.material.metalness = 1;
    gui = new GUI();
    gui.add(material, "metalness", 0, 1);

roughnessRoughness

Roughness roughnessrepresents the smoothness or roughness of the model surface. The smoother the surface, the stronger the specular reflection ability. The rougher the surface, the weaker the specular reflection ability, and the more diffuse reflection appears.
Roughness roughness, 0.0 represents smooth specular reflection, 1.0 represents complete diffuse reflection, the default is 0.5.

    const geometry = new THREE.BoxGeometry(10, 10, 10);
    // 材质
    textureCube = new THREE.CubeTextureLoader()
      .setPath(new URL("@/assets/", import.meta.url).href)
      .load(["/02.png", "/02.png", "/02.png", "/02.png", "/02.png", "/02.png"]);
    const material = new THREE.MeshStandardMaterial({
    
    
      color: 0x51efe4, //0x51efe4设置材质颜色
      metalness: 1,
      roughness: 0.5,
      envMap: textureCube,
    });
    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(0, 0, 0);

    scene.add(mesh);
    // mesh.material.metalness = 1;
    gui = new GUI();
    gui.add(material, "metalness", 0, 1);
    gui.add(material, "roughness", 0, 1);

test picture

The actual effect is as follows:

envMapIntensityEnvironment map reflectivity

Used to set the strength of the environment map. It controls the degree of reflection of the environment map on the surface of the object. The larger the value, the stronger the reflection, and the smaller the value, the weaker the reflection. The value range of this attribute is between 0 and 1, and the default value is 1.

Summary: The smaller the roughness, the stronger the reflection effect. If it is set to 0, then it will be completely specular, equivalent to a mirror.
Of course, in actual development, different environment maps will also affect the rendering effect, and it is also necessary to choose the appropriate map. Often this kind of map can be provided by the artist.

Texture and renderer color spaces are consistent

textureCube.encoding = THREE.sRGBEncoding; 

About the environment map of the modelenvironment

loader.load(new URL(`../assets/model.glb`, import.meta.url).href, function (gltf) {
    
    
    // 递归遍历批量设置环境贴图
    gltf.scene.traverse(function (obj) {
    
    
        if (obj.isMesh) {
    
     //判断是否是网格模型
            obj.material.envMap = textureCube; //设置环境贴图
        }
    });
})

If you want to use environment maps to add texture materials to all Mesh of the scene, you can do so through the scene environment attribute .environment. Just set the texture object corresponding to the environment map to the attribute value of .environment.

scene.environment = textureCube;

encodingSet the texture encoding method

encoding`How the texture's color values ​​are encoded and decoded to ensure correct color display. Common encoding methods include sRGB, Linear, RGBE, etc. Different coding methods are suitable for different scenarios and needs. When using textures, you need to choose an appropriate encoding method based on the actual situation.

//如果renderer.outputEncoding=THREE.sRGBEncoding;环境贴图需要保持一致
textureCube.encoding = THREE.sRGBEncoding;